5.頁面繪制-主題列表頁（使用ColorUI、uni-app官方組件）
1.主題列表頁
1.導入ColorUI
繪制主題列表頁，需要用到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";
2.新建主題列表頁zhuti_list
在pages/shequ目錄下新建頁面zhuti_list，然后在pages.json將zhuti_list配置為首頁，方便查看。
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"> 青春里,總有些事情要努力去做,總有些夢想要拼命去追,無需計較得失,只要青春無悔。 </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>
效果圖：
3.安裝uni-app官方組件
新建一個項目，選擇Hello uni-app模板
將新建的項目目錄下的components目錄復制粘貼到wwab目錄下：
4.懸浮按鈕uni-fab
在zhuti_list.vue中加入uni-fab相關代碼（到阿里圖標網又下載了幾張需要用到的圖標）
<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 }); } },
模態框彈出功能（用的ColorUI的普通模態框）
在zhuti_list.vue中的相關代碼：
<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>
效果圖：
5.模態框中發表主題功能開發
本來想要用富文本編輯器了，但是對于移動端的各種平臺，很難找到一個都兼容的。
于是采用類似于微信發朋友圈的方式，發表主題只提供發表長文本+圖片的模式。
用到ColorUI中的 長文本輸入框組件、圖片上傳組件、按鈕組件。
注意：
在模態框中使用圖片上傳組件，會導致圖片顯示不全，是居中導致的。
解決：在colorui的main.css中找到.cu-modal的樣式，將居中代碼注釋掉。
用ctrl+F直接搜定位。
同樣的方法，在main.css中找到cu-dialog，發現其寬度時680upx，因為上面去掉了居中代碼，所以需要給模態框加一個左邊距，一共寬度是750upx，所以左邊距35upx。
zhuti_list.vue中模態框內相關代碼：
<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; }
浙公網安備 33010602011771號