前言
前面的文章我们基本完成了主页开发
今天我们具体的去进行实现笔记详情页 并且分享我开发时遇到的问题
首先先看效果
我们对布局整体规划一下
:
右上角tips
轮播图难点不多 主要考虑图片的mode = aspectFit 避免出现变形 当图片过小是 会有留白和 小红书保持一致
右上角滑动图片时 写一个定时器 3秒后 隐藏右上角的角标 当页面滑动时重新显示
bash
<view ref="tips" v-show="swiperItems2.length>0&&timer" class="gui-bg-transparent page-tips">
<text >{{imgIndex+1}}/{{swiperItems2.length}}</text>
</view>
setTimer(){
if(this.timer != null){clearTimeout(this.timer);}
this.timer = setTimeout(()=>{
clearTimeout(this.timer);
this.timer = null;
},3000)
},
:
标题
:
详情
这里只有 一个问题 使用官方富文本组件是 会提示死循环 测试环境没有问题 线上直接提示内存溢出 后来使用了基础的 view
bash
<view style="letter-spacing: 3rpx;">
{{note.noteContent}}
</view>
<!-- <rich-text :nodes="note.noteContent" style="letter-spacing: 3rpx;"></rich-text>-->
:
评论类型
:
回复处理
评论类型分为文字和图片 暂时只实现一张 点击轮播
每条评论都可以点赞 回复 (图片固定高度 宽度自适应)
回复的话是一个列表 后续数量多的话可以完善加载更多
:
打开的时机
:
底部处理
打开的时机
这四种情况均会打开
打开时自动获取焦点 避免重复点击
底部可以打开评论窗口同时 添加 点赞 收藏 按钮
至此详情页静态代码开发完毕 下一篇我们讲解 用户