前言
移动端演示 http://8.146.211.120:8081/#/
前面的文章我们基本完成了主页开发
今天我们具体的去进行实现笔记详情页 并且分享我开发时遇到的问题
首先先看效果
我们对布局整体规划一下
- 轮播图
- 右上角tips
轮播图难点不多 主要考虑图片的mode = aspectFit 避免出现变形 当图片过小是 会有留白和 小红书保持一致
右上角滑动图片时 写一个定时器 3秒后 隐藏右上角的角标 当页面滑动时重新显示
<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
<view style="letter-spacing: 3rpx;">{{note.noteContent}}</view>
<!-- <rich-text :nodes="note.noteContent" style="letter-spacing: 3rpx;"></rich-text>-->
- 评论
- 评论类型
- 回复处理
评论类型分为文字和图片 暂时只实现一张 点击轮播
每条评论都可以点赞 回复 （图片固定高度 宽度自适应）
回复的话是一个列表 后续数量多的话可以完善加载更多
- 打开评论窗口
- 打开的时机
- 底部处理
打开的时机
这四种情况均会打开
打开时自动获取焦点 避免重复点击
底部可以打开评论窗口同时 添加 点赞 收藏 按钮
至此详情页静态代码开发完毕 下一篇我们讲解 用户
代码地址
https://gitee.com/ddeatrr/springboot_vue_xhs