绘制主题列表页,需要用到ColorUI。
uni-app插件市场中ColorUI的页面:
https://ext.dcloud.net.cn/plugin?id=239
将ColorUI下载解压后,将colorui文件夹复制到项目wwab目录下:
在App.vue中加入代码:
@import "colorui/main.css";
@import "colorui/icon.css";
在pages/shequ目录下新建页面zhuti_list,然后在pages.json将zhuti_list配置为首页,方便查看。
<template>
<view>
<view v-for="(itme,index) in zhuti_data" :key="index" class="cu-item radius padding-lr-lg shadow-warp bg-white margin-top">
<view class="cu-tag bg-red">置顶</view>
<view class="cu-tag bg-red">精品</view>
<view class="cu-tag bg-red">普通</view>
<view class="text-content zhaiyao">
青春里,总有些事情要努力去做,总有些梦想要拼命去追,无需计较得失,只要青春无悔。
</view>
<view class="text-gray text-sm text-right padding">
<text class="cuIcon-attentionfill margin-lr-xs"></text> 1分钟前
<text class="cuIcon-attentionfill margin-lr-xs"></text> 1111
<text class="cuIcon-messagefill margin-lr-xs"></text> 22222
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
zhuti_data:['1','2','3','4','5','6','1','2','3','4','5','6']
}
},
methods: {
},
onLoad() {
uni.setNavigationBarTitle({
title: '暗部智囊'
});
}
}
</script>
<style>
.zhaiyao{
text-overflow: -o-ellipsis-lastline;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
margin-top: 10upx;
}
</style>
效果图:
新建一个项目,选择Hello uni-app模板
将新建的项目目录下的components目录复制粘贴到wwab目录下:
<template>
<view>
<uni-fab ref="fab" :pattern="pattern" :content="content" @trigger="trigger"/>
</view>
</template>
<script>
export default {
data() {
return {
pattern: {
color: '#7A7E83',
backgroundColor: '#fff',
selectedColor: '#007AFF',
},
content: [{
iconPath: '/static/fabu.png',
selectedIconPath: '/static/fabu1.png',
text: '发主题',
active: false
},
{
iconPath: '/static/fanhuidingbu.png',
selectedIconPath: '/static/fanhuidingbu.png',
text: '返回顶部',
active: false
}
],
}
},
onBackPress() {
if (this.$refs.fab.isShow) {
this.$refs.fab.close()
return true
}
return false
},
methods: {
trigger(e){
// console.log(e)
this.content[e.index].active = !e.item.active
// uni.showModal({
// title: '提示',
// content: `您${this.content[e.index].active ? '选中了' : '取消了'}${e.item.text}`,
// success: function(res) {
// if (res.confirm) {
// console.log('用户点击确定')
// } else if (res.cancel) {
// console.log('用户点击取消')
// }
// }
// })
}
}
}
</script>
效果图:
methods: {
trigger(e){
console.log(e)
this.content[e.index].active = !e.item.active
if(e.index==1){
this.top()
}
},
top() { //回到顶部
uni.pageScrollTo({
scrollTop: 0, duration: 300
});
}
},
<template>
<view>
<uni-fab ref="fab" :pattern="pattern" :content="content" @trigger="trigger"/>
<view class="cu-modal" :class="modalName=='Modal'?'show':''">
<view class="cu-dialog">
<view class="cu-bar bg-white justify-end">
<view class="content">Modal标题</view>
<view class="action" @tap="hideModal">
<text class="cuIcon-close text-red"></text>
</view>
</view>
<view class="padding-xl">
Modal 内容。
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
modalName: null,
}
},
methods: {
trigger(e){
console.log(e)
this.content[e.index].active = !e.item.active
if(e.index==1){
this.top()
}
if(e.index==0){
this.showModal()
}
},
showModal(e) {
this.modalName = "Modal"
console.log(this.modalName)
},
hideModal(e) {
this.modalName = null
}
}
}
}
</script>
效果图:
本来想要用富文本编辑器了,但是对于移动端的各种平台,很难找到一个都兼容的。
于是采用类似于微信发朋友圈的方式,发表主题只提供发表长文本+图片的模式。
用到ColorUI中的 长文本输入框组件、图片上传组件、按钮组件。
注意:
在模态框中使用图片上传组件,会导致图片显示不全,是居中导致的。
解决:在colorui的main.css中找到.cu-modal的样式,将居中代码注释掉。
用ctrl+F直接搜定位。
同样的方法,在main.css中找到cu-dialog,发现其宽度时680upx,因为上面去掉了居中代码,所以需要给模态框加一个左边距,一共宽度是750upx,所以左边距35upx。
<view class="cu-modal" :class="modalName=='Modal'?'show':''" >
<view class="cu-dialog" style="margin-left: 35upx;">
<view class="cu-bar bg-white justify-end">
<view class="content">发表主题</view>
<view class="action" @click="hideModal">
<text class="cuIcon-close text-red"></text>
</view>
</view>
<view class="padding-xl">
<view class="cu-bar bg-white margin-top">
<view class="action">
图片上传
</view>
<view class="action">
{{imgList.length}}/4
</view>
</view>
<view class="cu-form-group">
<view class="grid col-4 grid-square flex-sub">
<view class="bg-img" v-for="(item,index) in imgList" :key="index" @tap="ViewImage" :data-url="imgList[index]">
<image :src="imgList[index]" mode="aspectFill"></image>
<view class="cu-tag bg-red" @tap.stop="DelImg" :data-index="index">
<text class='cuIcon-close'></text>
</view>
</view>
<view class="solids" @tap="ChooseImage" v-if="imgList.length<4">
<text class='cuIcon-cameraadd'></text>
</view>
</view>
</view>
<view class="cu-form-group margin-top">
<textarea maxlength="-1" spellcheck="false" @input="textareaAInput" placeholder="多行文本输入框"></textarea>
</view>
<view class="margin-top" style="display: flex;justify-content: center;">
<button class="cu-btn round bg-red shadow lg ">发布</button>
</view>
</view>
</view>
ChooseImage() {
uni.chooseImage({
count: 4, //默认9
sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图,默认二者都有
sourceType: ['album'], //从相册选择
success: (res) => {
if (this.imgList.length != 0) {
this.imgList = this.imgList.concat(res.tempFilePaths)
} else {
this.imgList = res.tempFilePaths
}
}
});
},
ViewImage(e) {
uni.previewImage({
urls: this.imgList,
current: e.currentTarget.dataset.url
});
},
DelImg(e) {
uni.showModal({
title: '提示信息',
content: '确定要删除这张图片吗?',
cancelText: '取消',
confirmText: '删除',
success: res => {
if (res.confirm) {
this.imgList.splice(e.currentTarget.dataset.index, 1)
}
}
})
},
textareaAInput(e) {
this.textareaAValue = e.detail.value
}
效果图:
zhuti_list.vue完整代码:
<template>
<view>
<view v-for="(itme,index) in zhuti_data" :key="index" class="cu-item radius padding-lr-lg shadow-warp bg-white margin-top">
<view class="cu-tag bg-red">置顶</view>
<view class="cu-tag bg-red">精品</view>
<view class="cu-tag bg-red">普通</view>
<view class="text-content zhaiyao">
青春里,lllbyvu总有些事情要努力去做,总有些梦想要拼命去追,无需计较得失,只要青春无悔。
</view>
<view class="text-gray text-sm text-right padding">
<text class="cuIcon-attentionfill margin-lr-xs"></text> 1分钟前
<text class="cuIcon-attentionfill margin-lr-xs"></text> 1111
<text class="cuIcon-messagefill margin-lr-xs"></text> 22222
</view>
</view>
<u-gap height="80" bg-color="#fff"></u-gap>
<u-divider color="#6d6d6d" half-width="80" border-color="#6d6d6d">©玩蛇的胖纸为网络文学而开发</u-divider>
<u-gap height="80" bg-color="#fff"></u-gap>
<uni-fab ref="fab" :pattern="pattern" :content="content" @trigger="trigger"/>
<view class="cu-modal" :class="modalName=='Modal'?'show':''" >
<view class="cu-dialog" style="margin-left: 35upx;">
<view class="cu-bar bg-white justify-end">
<view class="content">发表主题</view>
<view class="action" @click="hideModal">
<text class="cuIcon-close text-red"></text>
</view>
</view>
<view class="padding-xl">
<view class="cu-bar bg-white margin-top">
<view class="action">
图片上传
</view>
<view class="action">
{{imgList.length}}/4
</view>
</view>
<view class="cu-form-group">
<view class="grid col-4 grid-square flex-sub">
<view class="bg-img" v-for="(item,index) in imgList" :key="index" @tap="ViewImage" :data-url="imgList[index]">
<image :src="imgList[index]" mode="aspectFill"></image>
<view class="cu-tag bg-red" @tap.stop="DelImg" :data-index="index">
<text class='cuIcon-close'></text>
</view>
</view>
<view class="solids" @tap="ChooseImage" v-if="imgList.length<4">
<text class='cuIcon-cameraadd'></text>
</view>
</view>
</view>
<view class="cu-form-group margin-top">
<textarea maxlength="-1" spellcheck="false" @input="textareaAInput" placeholder="多行文本输入框"></textarea>
</view>
<view class="margin-top" style="display: flex;justify-content: center;">
<button class="cu-btn round bg-red shadow lg ">发布</button>
</view>
</view>
</view>
</view>
<u-gap height="80" bg-color="#fff"></u-gap>
</view>
</template>
<script>
export default {
data() {
return {
zhuti_data:['1','2','3','4','5','6','1','2','3','4','5','4','5','6','1','2','3','4','5','6'],
pattern: {
color: '#7A7E83',
backgroundColor: '#fff',
selectedColor: '#007AFF',
},
content: [{
iconPath: '/static/fabu.png',
selectedIconPath: '/static/fabu1.png',
text: '发主题',
active: false
},
{
iconPath: '/static/fanhuidingbu.png',
selectedIconPath: '/static/fanhuidingbu.png',
text: '返回顶部',
active: false
}
],
modalName: null,
imgList: [],
textareaAValue: ''
}
},
onBackPress() {
if (this.$refs.fab.isShow) {
this.$refs.fab.close()
return true
}
return false
},
methods: {
trigger(e){
console.log(e)
this.content[e.index].active = !e.item.active
if(e.index==1){
this.top()
}
if(e.index==0){
this.showModal()
}
},
//回到顶部
top(){uni.pageScrollTo({ scrollTop: 0, duration: 300 });},
showModal(e) {
this.modalName = "Modal"
console.log(this.modalName)
},
hideModal(e) {
this.modalName = null
},
ChooseImage() {
uni.chooseImage({
count: 4, //默认9
sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图,默认二者都有
sourceType: ['album'], //从相册选择
success: (res) => {
if (this.imgList.length != 0) {
this.imgList = this.imgList.concat(res.tempFilePaths)
} else {
this.imgList = res.tempFilePaths
}
}
});
},
ViewImage(e) {
uni.previewImage({
urls: this.imgList,
current: e.currentTarget.dataset.url
});
},
DelImg(e) {
uni.showModal({
title: '提示信息',
content: '确定要删除这张图片吗?',
cancelText: '取消',
confirmText: '删除',
success: res => {
if (res.confirm) {
this.imgList.splice(e.currentTarget.dataset.index, 1)
}
}
})
},
textareaAInput(e) {
this.textareaAValue = e.detail.value
}
},
onLoad() {
uni.setNavigationBarTitle({
title: '暗部智囊'
});
}
}
</script>
<style>
.zhaiyao{
text-overflow: -o-ellipsis-lastline;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
margin-top: 10upx;
}
</style>
注意:
根据一个产品经理课程中所说的,所有不可撤销返回的操作,都应该有一个确认的弹窗提示用户。
所以在发新主题功能中的插入图片功能 ,在删除图片的时候 ,也应该有一个弹窗来问用户是否确认删除。
但是这个时候,弹窗被模态框挡住。
解决方式:
在App.vue中加入:
uni-modal{
z-index: 19999 !important;
}