文章/答案/技术大牛

发布

社区首页 >专栏 >5.页面绘制-主题列表页（使用ColorUI、uni-app官方组件）

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

玩蛇的胖纸

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

3.3K00

代码可运行

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

运行总次数：0

代码可运行

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

登录后参与评论

暂无评论

编辑精选文章

换一批

万字详解高可用架构设计

2487

Go 开发者必备：Protocol Buffers 入门指南

亿级月活的社交 APP，陌陌如何做到 3 分钟定位故障？

1366

60页PPT全解：DeepSeek系列论文技术要点整理

2429

uniapp上传图片至服务器，获得在线图片链接预览（实战）

网站

功能需求：前端选择本地文件，将选择好的文件显示在界面上进行预览，可同时选择四张进行预览。

王小婷

2020/08/11

10.5K2

6.页面绘制-帖子列表页和前端路由

css javascript

在pages/shequ目录下新建页面tiezi。然后在pages.json中将tiezi配置为首页，方便观察调试。

玩蛇的胖纸

2021/07/13

5130

vue之图片上传组件封装

github git 开源

代码已上传至github github代码地址：https://github.com/Miofly/mio.git

用户10106350

2022/10/28

5620

11.开发newapp个人中心pages/me/me.vue和修改密码功能

python

1.在小程序端newapp开发个人中心页面： 1.备用 1.新建修改密码页面uppwd 2.开发pages/me/me.vue： <template> <view class="conten

玩蛇的胖纸

2020/06/22

5280

10.开发newapp的登录功能login

python

1.设置是否已经登录的验证 1.在newapp/pages/center/center.vue中： <template> <view class="content"> </view> </template> <script> export default { data() { return { } }, methods: {

玩蛇的胖纸

2020/06/22

5660

uniapp图片弹框效果

需求：点击提交按钮，提交成功后会弹出一个弹框，提示成功，点击右上角的叉号或者我知道了，隐藏弹框效果。

王小婷

2020/02/18

6K1

18.普通用户、网格长、网格员，操作数据（5）newapp/components/wgy.vue

components

1.在newapp/components/wgy.vue中： <template> <view> <scroll-view scroll-x class="bg-cyan na

玩蛇的胖纸

2020/07/03

5860

17.普通用户、网格长、网格员，操作数据（4）newapp/components/wgz.vue

components

1.在newapp/components/wgz.vue中： <template> <view> <view class="cu-bar bg-white solid-bottom"> <view class="action"> <text class="cuIcon-title text-orange"></text> {{data3.pq.name}} </view>

玩蛇的胖纸

2020/07/03

3790

uni-app 结合云函数开发小程序博客（二）：云函数实现登录注册

云函数 serverless javascript 网站数据库

不好意思大家，个人原因拖了一周时间才发表第二篇，没想到还有朋友在支持，非常感谢和抱歉。第一篇中已经引入了第三方样式，实现了主题和语言的切换；本篇主要开始页面的搭建和云函数创建，前端代码通过uniCloud.callFunction()方法调用云函数，云函数中可执行js运算、读写云数据库（NoSQL），直接返回json数据，也可以使用npm安装第三方依赖。服务端环境安装配置和安全等方面完全不需要去考虑。

一只图雀

2020/05/07

3.4K0

小程序使用 Promise.all 完成文件异步上传

node.js 小程序 javascript 微信

extends [微信小程序开发技巧总结（二） -- 文件的选取、移动、上传和下载 - Kindear - 博客园 (cnblogs.com)]

Kindear

2021/04/26

1.6K0

uni-app 结合云函数开发小程序博客（一）：环境搭建

javascript api 小程序微信 https

uni-app 是一个使用 Vue.js 开发的跨平台应用的前端框架，开发者编写一套代码，可发布到iOS、Android、H5、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉/淘宝）、快应用等多个平台；uni在跨端的同时，通过条件编译和对应平台特有API地调用，可以很好得为某个平台写个性化的代码、调用其独有能力而不影响其它平台；生态丰富，支持npm包管理，丰富的第三方SDK集成和高达1600个插件的支持；上手容易，采用vue语法和微信小程序api，无额外学习成本，同时开发利器HbuilderX具有强大的语法提示。相信它将是你跨端开发的不二选择。

程序员白彬

2020/07/10

2.7K0

12.开发newapp修改Bug1：用户信息应该实时更新，网格长数据展示，网格长网格员编辑数据的权力的查询

python

1.修改Bug1：用户信息应该实时更新 1.修改潜在bug，因为后端可能要涉及到用户身份权限的修改，所以每一次打开个人中心和操作中心，都应该更新一遍用户的个人信息 1.在后端项目user_operations/views.py中： class UpUserInfoView(APIView): """更新用户信息""" def get(self, request): token = request.GET.get('token') if token:

玩蛇的胖纸

2020/06/28

9180

uni-app点击按钮，生成列表元素

html jquery dom

在jQuery里面，动态生成div元素需要进行html的拼接，拼接完成再将拼接的内容放到指定的div里面去，在vue中一般编写代码时都不需要操作DOM元素，那么点击按钮的时候，怎么动态生成自己想要的列表元素？

王小婷

2020/11/30

1.4K0

微信小程序--基于ColorUI构建皮皮虾短视频去水印组件（仅供学习使用）

api

没错，我是皮友，我想学习舞蹈（/doge）和瑜伽，要无水印的那种有助于我加深学习。

Kindear

2020/11/04

1.8K0

uni-app插件ColorUI步骤条

css

1. uni-app插件ColorUI步骤条 1.1. 前言 uni-app就不介绍了，前面几篇已经有所介绍，不知道的可以翻看我前面几篇博客 ColorUI-uniApp是uni-app的一款ui组件

老梁

2019/09/10

5.2K0

Typecho小程序详细教程（三）个性定制

小程序微信腾讯云开发者社区

注意：此处可直接在解压出来的目录中进行图片的替换和修改，建议将整个images目录备份后再进行操作，修改后的图片名称需与原文件名称保持一致（如，修改home图标时，可将原图标删除，粘贴一张名为home.png的图标放置在images/tabar目录下）

Weiyang

2020/05/07

8310

uni-app实现一个循环卡片效果

github git 开源

ColorUI-UniApp是一款适应于H5、微信小程序、安卓、ios、支付宝的高颜值，高度自定义的Css组件库，项目里好多地方都用的到这个UI组件今天记录一个ColorUI-UniApp的使用和实现循环卡片效果。

王小婷

2019/12/30

4.8K0

uni-app实战之社区交友APP（8）搜索列表页和文章详情页开发

javascript

本文先介绍了搜索结果页开发，包括搜索类型的传递、占位符设置和搜索功能实现；再介绍了帖子详情页的开发，包括页面配置和通信、公共列表组件优化、关注顶踩功能完善、帖子内容和图片展示、评论输入框组件开发和封装、评论列表组件和分享功能组件开发等。

cutercorley

2021/02/04

2.5K0

9.开发newapp的首页index

python

1.轮播图效果 1.在后端开发获取banner的api： 1.在后端项目NewCenter/apps/user_operations/views.py中开发获取片区banner图的视图： from django.shortcuts import render,HttpResponse from rest_framework.views import APIView,Response from users.models import PianQu from users.serializers import P

玩蛇的胖纸

2020/06/22

3980

uni-app实战之社区交友APP（5）搜索和发布页开发

css

本文先介绍了搜索页的开发，包括页面的搭建（搜索框、搜索历史和搜索结果）和搜索逻辑的优化；再重点介绍了发布页的开发：自定义导航栏的实现，文本输入框的实现，底部操作条图标和按钮的实现，图品上传和删除的实现以及编辑保存草稿的实现。

cutercorley

2021/02/02

2.8K0