从零用java实现 小红书 springboot vue uniapp （3）详情页优化
前言
前面的文章我们基本完成了主页开发
今天我们具体的去进行实现笔记详情页 并且分享我开发时遇到的问题
首先先看效果
我们对布局整体规划一下
-
轮播图
-
右上角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://blog.csdn.net/qq_35238367/article/details/144421183
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！