5.页面绘制-主题列表页（使用ColorUI、uni-app官方组件）

玩蛇的胖纸

发布于 2021-07-08 15:27:53

3.2K0

发布于 2021-07-08 15:27:53

文章被收录于专栏：雪胖纸的玩蛇日常雪胖纸的玩蛇日常

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;
            }

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2021-07-01 ，如有侵权请联系 cloudcommunity@tencent.com 删除

css

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体分享计划，欢迎热爱写作的你一起参与！

css

登录后参与评论

0 条评论

热度