前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >6.页面绘制-帖子列表页和前端路由

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

作者头像
玩蛇的胖纸
发布于 2021-07-13 03:50:22
发布于 2021-07-13 03:50:22
51300
代码可运行
举报
运行总次数:0
代码可运行

1.新建帖子列表页tiezi

1.新建帖子列表页面

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

2.新建css文件

在pages/shequ/tiezi目录下新建css文件tiezi.css

在pages/shequ/tiezi/tiezi.vue中引用:

tiezi.vue:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<style>
    @import url("tiezi.css");
</style>

这样可以方便调试css样式。

3.主题详情

tiezi.vue:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<template>
    <view>
        <view class="zhuti">
            <view class="left">
                <image class="touxiang" src="@/static/touxiang.png" mode=""></image>
            </view>
            <view class="right">
                <view class="username padding">
                    <view class="u1">孤天里的鹤</view>
                    <view class="u1 text-gray">举报</view>
                </view>
                <view class="content ">
                    <view class="content-text ">
                        我要爆料我要爆料
                        我要爆料我要爆料我要爆料我要爆料我要爆料我要爆料我要爆料我要爆料
                        我要爆料我要爆料
                    </view>
                    <view class="content-img">
                        <image src="@/static/banner1.png" mode=""></image>
                        <image src="@/static/banner2.png" mode=""></image>
                        <image src="@/static/banner3.png" mode=""></image>
                        <image src="@/static/banner4.png" mode=""></image>
                    </view>
                    
                </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>
        
        <u-line class="u-line" color="gray" border-style="dashed"></u-line>
        
        
        

        
        
        
        
    </view>
</template>

<script>
    
    export default {
        data() {
            return {
                
            }
        },
        methods: {
            
        }
        
    }
</script>

<style>
    @import url("tiezi.css");
</style>

tiezi.css:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
    .zhuti{
        width: 100%;
        min-height: 200upx;
        /* background-color: #19BE6B; */
        display: flex;
    }
    .left{
        width: 100upx;
        /* background-color: #007AFF; */
        text-align: center;
    }
    .touxiang{
        width: 70upx;
        height: 70upx;
        margin-top: 25upx;
    }
    .right{
        width: 650upx;
        /* background-color: #2C405A; */
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
    .username{
        display: flex;
        justify-content: space-between;
    }
        
    .content-img{
        display: flex;
        flex-wrap: wrap;
        
    }
    .content-img image{
        width: 300upx;
        height: 300upx;
        margin: 10upx;
    }

效果图:

4.帖子列表排列方式的切换

使用uVIew组件中的Dropdown下拉菜单组件

在tiezi.vue中:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<template>
    <view>
<u-dropdown>
            <u-dropdown-item v-model="value1" title="排列" :options="options1" @change="change"></u-dropdown-item>
        </u-dropdown>
</view>
</template>

<script>
    
    export default {
        data() {
            return {
                
                value1:1,
                options1: [{label: '按热度',value: 1,},{label: '按时间',value: 2,}]
                
            }
        },
        methods: {
            
            change(){
                console.log(this.value1)
            }
        }
        
    }
</script>

5.回复列表

tiezi.vue中:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<template>
    <view>
        
        <view class="zhuti huifu shadow-warp bg-white" v-for="(item,index) in huifu" :key="index">
            <view class="left">
                <image class="touxiang" src="@/static/touxiang.png" mode=""></image>
            </view>
            <view class="right">
                <view class="username padding">
                    <view class="u1">孤天里的鹤</view>
                    <view class="u1 text-gray">举报</view>
                </view>
                <view class="content ">
                    <view class="text-gray text-sm padding">
                        <span class="text-blue">用户1</span>
                        我要回复我要回复
                        我要爆料我要爆料我要爆料我要爆料我要爆料我要爆料我要爆料我要爆料
                        我要爆料我要爆料
                    </view>
                    <view class="content-text ">
                        我要回复我要爆料
                        我要爆料我要爆料我要爆料我要爆料我要爆料我要爆料我要爆料我要爆料
                        我要爆料我要爆料
                    </view>
                    <view class="content-text padding-lr" v-if="huifu_tie">
                        <view class="cu-form-group" style="border: #808080 1px dashed;">
                            <textarea maxlength="-1" spellcheck="false" @input="textareaAInput" placeholder="多行文本输入框"></textarea>
                        </view>
                        <view class="text-right padding-top padding-lr">
                            <button @click="huifu1" class="cu-btn round bg-blue shadow sm ">发布</button>
                        </view>
                    </view>
                </view>
                <view class="text-gray text-sm text-right padding huitie_foot">
                    <view class="margin-lr"><text class="cuIcon-attentionfill margin-lr-xs"></text> 1分钟前</view>
                    <view class="margin-lr" @click="htz"><text class="cuIcon-attentionfill margin-lr-xs"></text> 回复</view>
                    <view class="margin-lr"><text class="cuIcon-appreciate margin-lr-xs"></text> 22</view>
                </view>
            </view>
        </view>
        
    
    </view>
</template>

<script>
    
    export default {
        data() {
            return {
                huifu:['回复1','回复2','回复3','回复4'],
                huifu_tie:false,
                textareaAValue: '',
                
                
            }
        },
        methods: {
            textareaAInput(e) {
                this.textareaAValue = e.detail.value
            },
            htz(e){
                this.huifu_tie=true
                console.log(1111)
            },
            huifu1(e){
                console.log('回复帖子')
                this.huifu_tie=false
            }
            
        }
        
    }
</script>

<style>
    @import url("tiezi.css");
</style>

tiezi.css中:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
    .zhuti{
        width: 100%;
        min-height: 200upx;
        /* background-color: #19BE6B; */
        display: flex;
    }
    .left{
        width: 100upx;
        /* background-color: #007AFF; */
        text-align: center;
    }
    .touxiang{
        width: 70upx;
        height: 70upx;
        margin-top: 25upx;
    }
    .right{
        width: 650upx;
        /* background-color: #2C405A; */
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
    .username{
        display: flex;
        justify-content: space-between;
    }
        
    .content-img{
        display: flex;
        flex-wrap: wrap;
        
    }
    .content-img image{
        width: 300upx;
        height: 300upx;
        margin: 10upx;
    }
    
    .huifu{
        margin-bottom: 20upx;
    }
    .huitie_foot{
        display: flex;
        flex-direction: row-reverse;
    }

6.回复组件

用到了uni-app的官方ui组件中的分页组件+多行输入框

tiezi.vue中:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<template>
    <view>

        <uni-pagination show-icon="true" total="63" current="1" pageSize="10" @change="change1"></uni-pagination>
        
        <u-gap height="80"></u-gap>    
        
        <view class="content-text padding-lr">
            <view class="cu-form-group" style="border: #808080 1px dashed;">
                <textarea maxlength="-1" spellcheck="false" @input="textareaAInput" placeholder="回复内容"></textarea>
            </view>
            <view class="text-right padding-top padding-lr">
                <button @click="huifu1" class="cu-btn bg-blue shadow">发布</button>
            </view>
        </view>
        
        <u-gap height="80"></u-gap>    
        

    
    </view>
</template>

<script>
    
    export default {
        data() {
            return {
                huifu:['回复1','回复2','回复3','回复4'],
                huifu_tie:false,
                textareaAValue: '',
                value1:1,
                options1: [{label: '按热度',value: 1,},{label: '按时间',value: 2,}]
                
            }
        },
        methods: {
            textareaAInput(e) {
                this.textareaAValue = e.detail.value
            },
            
            change1(e) {
                console.log(e)
                this.current = e.current
            }
            
        }
        
    }
</script>

<style>
    @import url("tiezi.css");
</style>

效果图:

2.前端路由

在pages.json中让首页配置为首页。

在pages/shequ/shequ.vue中添加路由相关代码:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<template>
    <view class="content">
        
        <view class="card" v-for="(item,index) in shequ_data" :key=index @click="GoToZhuTiList(item)">    
……………………
    
    </view>
</template>
<script>
    export default {
        data() {
            return {
        },
        methods: {
            GoToZhuTiList(e){
                console.log(e.title)
                uni.navigateTo({
                      url:"./zhuti_list/zhuti_list?bankuai_title="+e.title
              })
            }
            
        }
    }
</script>

在pages/shequ/zhuti_list/zhuti_list.vue中添加路由相关代码:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<template>
    <view>
        <view v-for="(item,index) in zhuti_data" :key="index" @click="GoToTieZi(item)" class="cu-item radius padding-lr-lg shadow-warp bg-white margin-top">
            ………………
……    
            
    </view>
</template>

<script>
    export default {
        data() {
            return {
        },
        methods: {
            
            GoToTieZi(e){
                    // console.log(e.title)
                    uni.navigateTo({url:"../tiezi/tiezi?bankuai_title="+this.bankuai_title})
            }
        },
        onLoad(e) {
            console.log(e)
            this.bankuai_title=e.bankuai_title
            uni.setNavigationBarTitle({
                title: e.bankuai_title
            });
        }
    }
</script>

在pages/shequ/tiezi/tiezi.vue内添加路由相关代码:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<script>
    
    export default {
        data() {
            return {
        },
        methods: {
            
        },
        onLoad(e) {
            console.log(e)
            
            uni.setNavigationBarTitle({
                title: e.bankuai_title
            });
        }
        
    }
</script>
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2021-07-06 ,如有侵权请联系 cloudcommunity@tencent.com 删除

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

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

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
5.页面绘制-主题列表页(使用ColorUI、uni-app官方组件)
在pages/shequ目录下新建页面zhuti_list,然后在pages.json将zhuti_list配置为首页,方便查看。
玩蛇的胖纸
2021/07/08
3.3K0
uni-app点击按钮,生成列表元素
在jQuery里面,动态生成div元素需要进行html的拼接,拼接完成再将拼接的内容放到指定的div里面去,在vue中一般编写代码时都不需要操作DOM元素,那么点击按钮的时候,怎么动态生成自己想要的列表元素?
王小婷
2020/11/30
1.4K0
4.页面绘制-脚本页面和个人中心页面
加入输入框按钮和承载生成小说文本的input框,同时加入一些Gap间隔槽,提升结构美观,构成了脚本页面jiaoben.vue:
玩蛇的胖纸
2021/06/29
1K0
uni-app 结合云函数开发小程序博客(二):云函数实现登录注册
不好意思大家,个人原因拖了一周时间才发表第二篇,没想到还有朋友在支持,非常感谢和抱歉。第一篇中已经引入了第三方样式,实现了主题和语言的切换;本篇主要开始页面的搭建和云函数创建,前端代码通过uniCloud.callFunction()方法调用云函数,云函数中可执行js运算、读写云数据库(NoSQL),直接返回json数据,也可以使用npm安装第三方依赖。服务端环境安装配置和安全等方面完全不需要去考虑。
一只图雀
2020/05/07
3.4K0
第三章:组织页面完善、引入消息帖子与页面独立状态
Qiuner
2024/11/21
960
第三章:组织页面完善、引入消息帖子与页面独立状态
uni-app实现一个循环卡片效果
ColorUI-UniApp是一款适应于H5、微信小程序、安卓、ios、支付宝的高颜值,高度自定义的Css组件库,项目里好多地方都用的到这个UI组件 今天记录一个ColorUI-UniApp的使用和实现循环卡片效果。
王小婷
2019/12/30
4.8K0
uni-app实现一个循环卡片效果
保姆级全栈项目BBS 开发实录 第二章:前端基础页面
https://cdn.jsdelivr.net/gh/Qiu-JW/NotePicture/2024/08/image-20240806215014105.png
Qiuner
2024/11/21
610
保姆级全栈项目BBS 开发实录 第二章:前端基础页面
11.开发newapp个人中心pages/me/me.vue和修改密码功能
1.在小程序端newapp开发个人中心页面: 1.备用 1.新建修改密码页面uppwd  2.开发pages/me/me.vue: <template> <view class="conten
玩蛇的胖纸
2020/06/22
5280
10.开发newapp的登录功能login
1.设置是否已经登录的验证 1.在newapp/pages/center/center.vue中: <template> <view class="content"> </view> </template> <script> export default { data() { return { } }, methods: {
玩蛇的胖纸
2020/06/22
5660
uni-app渲染新闻列表,跳转详情页
3:开始写list界面代码,主要讲json数据渲染在前端列表,前面有说过,很简单的,然后在通过goDetail的方法带参跳转到详情页。
王小婷
2020/02/11
2.8K0
uni-app渲染新闻列表,跳转详情页
12.开发newapp修改Bug1:用户信息应该实时更新,网格长数据展示,网格长网格员编辑数据的权力的查询
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实战之社区交友APP(9)我的页面开发
本文主要介绍了我的(个人中心)页面开发,包括以下几方面: 个人中心和设置页面开发,包括页面配置、个人中心和设置页UI构建; 修改密码和邮箱页面开发,包括修改密码UI构建和表单验证、修改邮箱UI构建和表单验证; 编辑资料页面开发,包括页面UI构建、修改头像、昵称、性别、情感、职业、生日和城市功能实现; 帮助反馈和关于页面开发。
cutercorley
2021/02/22
2.8K1
uni-app实战之社区交友APP(9)我的页面开发
uni-app实战之社区交友APP(4)首页开发
本文主要介绍了首页图文列表和滚动选项卡的开发: 图文列表的开发,包括顶部导航栏配置,图文列表项(头像、昵称、关注按钮、标题、标题封面图、点赞、踩、评论和分享)等的开发; 列表组件优化,包括分割线的开发和封装,动画特效实现,关注、顶踩功能的完善; 滚动选项卡开发,包括顶部选项卡开发、列表的同步显示和滑动,上拉加载的开发和封装,无数据组件开发等。
cutercorley
2021/01/29
2.9K0
uni-app实战之社区交友APP(4)首页开发
uni-app实战之社区交友APP(8)搜索列表页和文章详情页开发
本文先介绍了搜索结果页开发,包括搜索类型的传递、占位符设置和搜索功能实现; 再介绍了帖子详情页的开发,包括页面配置和通信、公共列表组件优化、关注顶踩功能完善、帖子内容和图片展示、评论输入框组件开发和封装、评论列表组件和分享功能组件开发等。
cutercorley
2021/02/04
2.5K0
uni-app实战之社区交友APP(8)搜索列表页和文章详情页开发
学习uni-app官方教程
从hello-uniapp中复制common文件夹以及static下面的uni.ttf文件到news项目同目录下
阿超
2022/08/16
1K0
学习uni-app官方教程
uni-app(2.框架基础)
打开页面文件index.vue(pages/index/index.vue,所有的页面文件都是以.vue结尾的,而不是html)
玩蛇的胖纸
2021/06/22
6530
uni-app(2.框架基础)
Typecho小程序详细教程(三)个性定制
注意:此处可直接在解压出来的目录中进行图片的替换和修改,建议将整个images目录备份后再进行操作,修改后的图片名称需与原文件名称保持一致(如,修改home图标时,可将原图标删除,粘贴一张名为home.png的图标放置在images/tabar目录下)
Weiyang
2020/05/07
8320
Typecho小程序详细教程(三)个性定制
Uniapp商城项目【详细笔记文档】
1.1 通过hbuilderx编辑器创建一个默认的uni-app项目(如图1——图2)
MIKE笔记
2023/03/23
1.7K0
Uniapp商城项目【详细笔记文档】
uni-app实战之社区交友APP(7)消息页开发
本文主要介绍了消息也的开发,主要包括3部分: 消息列表页开发,包括页面配置、消息列表组件的开发和封装、下拉刷新功能和下拉弹出层组件的使用; 我的好友列表页开发,包括页面配置、导航组件开发、好友列表组件开发和封装、以及性别图标显示; 聊天页面开发,包括页面配置、输入框组件开发、聊天列表组件的开发和封装、以及聊天页功能完善。
cutercorley
2021/02/04
2.2K0
uni-app实战之社区交友APP(7)消息页开发
uni-app实战之社区交友APP(5)搜索和发布页开发
本文先介绍了搜索页的开发,包括页面的搭建(搜索框、搜索历史和搜索结果)和搜索逻辑的优化; 再重点介绍了发布页的开发:自定义导航栏的实现,文本输入框的实现,底部操作条图标和按钮的实现,图品上传和删除的实现以及编辑保存草稿的实现。
cutercorley
2021/02/02
2.8K0
uni-app实战之社区交友APP(5)搜索和发布页开发
推荐阅读
相关推荐
5.页面绘制-主题列表页(使用ColorUI、uni-app官方组件)
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档