文章/答案/技术大牛

发布

社区首页 >专栏 >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

Ubuntu 18.04/16.04通过修改PPA源安装PHP7.2

bash bash 指令 apt-get http php

简单记录下Ubuntu 18.04/16.04通过修改PPA源安装PHP7.2的过程步骤。

星哥玩云

2022/07/14

5630

Ubuntu上PHP的安装及多版本共存切换

bash bash 指令 apt-get 编程算法 http

Ubuntu上官方的源，比如 Ubuntu 14.04 默认源中的是 PHP5.6.x、Ubuntu16.04 默认源中的是 PHP7.0.x，那么如果想在 Ubuntu 16.04 上安装 PHP7.1，PHP7.2，应该怎么办呢？

星哥玩云

2022/07/13

1.5K0

ubuntu18.04安装zabbix.md

nginx zabbix 云数据库 SQL Server 数据库 sql

Ubuntu18.04 nginx1.1.4 mysql5.7 php7.0

buiu

2021/12/21

2650

Ubuntu14.04下使用Evernote方法总汇

ubuntu linux erp git 开源

有些东西总喜欢放到Evernote中，但他却不存在linux版的，一直想解决在Ubuntu下使用。功夫不负有心人，今天重装系统后。终于找到了，方法有两个，虽然都试过了，发现其中一个与之前的pidginQQ差不多，闲话少说，一起奉上。

WindCoder

2018/09/20

6500

Ubuntu 安装php+mysql+nginx

ubuntu php 云数据库 SQL Server nginx http

https://blog.csdn.net/Msmile_my/article/details/73647809

悟空聊架构

2018/10/10

1K0

漏洞环境搭建之Linux+Apache+Mysql+PHP

云数据库 SQL Server 数据库 sql html 企业

Ubuntu16.04 apache2 MySQL PHP5.6 php_cms带有原有数据库文件

HACK学习

2019/08/06

1.3K0

Ubuntu下安装Nginx+PHP+MySql环境

ubuntu nginx php 云数据库 SQL Server

写在之前：之前腾讯云线下推广的时候给同学们讲过一趟基于ubuntu系统安装WordPress搭建自己的个人博客的课程。最近刚好有个朋友想要学习下ubuntu系统，然后我就把一个闲置的云服务器给她玩，顺手发个她上次讲课时候的教程（教程地址）然而呢，忘记一个问题，我们当时教学用的服务器是14.2的版本，而我给她重装的是，16.04的LST版本。原本的php5也因为apt源的问题无法安装，于是自己度娘加一顿操作，在ubuntu下安装了php7+mysql5.7，顺带把过程记录下来，方便以后查阅。 ---- St

李郑

2018/02/28

4.3K2

Ubuntu 18.04和Debian 9上安装PHP 5.6具体步骤

ubuntu linux php 网站建设

PHP语言是许多想要建站的站长们需要的一款强大开发语言PHP 5.6是目前比较主流的PHP版本，虽然比起PHP7要稍显不足，但是对于系统和硬件的要求也比较低，是相当不错的开发语言，只要用户有了这个语言再加上一些环境就能够轻松实现建站，立马拥有一个自己的网站，本篇文章重点为大家分享一下在Ubuntu 18.04和Debian 9上安装PHP 5.6具体步骤。

用户9042463

2021/09/30

2.1K0

在Linux服务器（ubuntu 16）上部署多套PHP环境

linux ubuntu php 云数据库 SQL Server

近期终于忍痛将所有的代码从SAE切换到了个人的vps，部署过程中发现，ubuntu 16默认支持的PHP版本为PHP 7，但是由于本人的PHP写的比较早，用到了mysql相关的内容，因此为了降低成本，不得不安装PHP 5.X系列。经过一番折腾终于解决问题，这里附上对应的过程。最终版本服务器： $ cat /proc/version Linux version 4.8.3-x86_64-linode76 (maker@build) (gcc version 4.7.2 (Debian 4.7

子勰

2018/05/22

1.5K0

PHP 8.4 安装和升级指南

服务器配置 php 存储服务

PHP 8.4 在当前的 Debian 和 Ubuntu 软件存储库中不可用。本指南使用由 Ondřej Surý 维护的存储库。多年来，Ondrej 的 PHP 存储库一直是 Ubuntu、Debian 及其衍生产品上 PHP 的实际存储库。

Tinywan

2024/11/28

8960

Ubuntu16.04部署LNMP环境

php lnmp nginx lamp linux

LNMP就是相对于LAMP环境的开发环境： LAMP = Linux + Apache + MySQL + PHP LNMP = Linux + Nginx + MySQL + PHP

Meng小羽

2019/12/22

4840

[视频教程] ubuntu系统下安装最新版PHP7.3.X环境

php apt-get http web.py 单片机

https://www.bilibili.com/video/av69088870/

唯一Chat

2019/09/29

5020

PHP7.2安装

php7

sudo apt-get install software-properties-common python-software-properties sudo add-apt-repository ppa:ondrej/php && sudo apt-get update sudo apt-get -y install php7.2 # 如果之前有其他版本PHP，在这边禁用掉 sudo a2dismod php5 sudo a2enmod php7.2 # 安装常用扩展 sudo -y apt-

用户2657851

2020/03/04

9620

Ubuntu 16.04环境LNMP实现 PHP5.6和PHP7.2多版本共存

http apt-get bash bash 指令单片机

LNMP的搭建，首先搭建的是5.6的版本，不影响，在此基础上再安装一个PHP7.2。

星哥玩云

2022/07/14

4880

如何在Ubuntu 14.04上升级到PHP 7

ubuntu linux apache php 云数据库 SQL Server

2015年12月3日发布的PHP 7承诺与以前版本的语言相比具有显着的速度提升，以及标量类型提示等新功能。本指南介绍如何快速将运行PHP 5.x（任何版本）的Apache或Nginx Web服务器升级到PHP 7。

八十岁的背影

2018/10/22

2.2K0

ubuntu 20.04 apt 安装 PHP8.0

ubuntu php apt-get

这里要介绍一下安装扩展的情况。因为PHP有两种运行方式，一种是FPM，一种是CLI。所以它可以控制一个扩展只在FPM加载，而不在CLI加载的方式。

魔王卷子

2021/09/19

3.1K0

ubuntu下nginx+php5的部署

ubuntu nginx php

ubuntu下nginx+php5环境的部署和centos系统下的部署稍有不同，废话不多说，以下为操作记录： 1）nginx安装 root@ubuntutest01-KVM:~# sudo apt-get update && sudo apt-get upgrade root@ubuntutest01-KVM:~# sudo apt-get install libpcre3 libpcre3-dev zlib1g-dev libssl-dev build-essential openssl libssl0.

洗尽了浮华

2018/01/23

8870

Ubuntu14.04安装Python3

bash bash 指令 python scrapy

Scrapy已经支持Python3了https://blog.scrapinghub.com/2016/02/04/python-3-support-with-scrapy-1-1rc1/

py3study

2020/01/13

1.1K0

在 Ubuntu 16.04 下配置 Nginx + PHP 7.0 + MySQL 环境

nginx 云数据库 SQL Server 数据库 sql phpmyadmin

之前我用 lnmp.org 的一键安装包来配置 web 服务器，一直懒得去动，对 nginx 的配置也是一知半解。买了新的 vps 之后需要重新配置服务器环境，趁这个机会让我手动一个个安装它们并且熟悉熟悉吧。

zgq354

2019/11/24

2K0

使用 Caddy 和 Apache 搭建 PHP 环境

php apache 数据库云数据库 SQL Server sql

本文链接：https://lisz.me/tech/php/caddy-apache.html

zhonger

2022/10/28

9290