5.頁面繪製-主題列表頁（使用ColorUI、uni-app官方元件）

阿新 • • 發佈：2021-07-01

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目錄下新建頁面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>