从零用java实现小红书 springboot vue uniapp （3）详情页优化

顽疲2024-12-16 17:04

前言

移动端演示 http://8.146.211.120:8081/#/

前面的文章我们基本完成了主页开发
今天我们具体的去进行实现笔记详情页并且分享我开发时遇到的问题

首先先看效果

我们对布局整体规划一下
:
右上角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>-->

:
评论类型
:
回复处理

评论类型分为文字和图片暂时只实现一张点击轮播

每条评论都可以点赞回复（图片固定高度宽度自适应）

回复的话是一个列表后续数量多的话可以完善加载更多
:
打开的时机
:
底部处理

打开的时机

这四种情况均会打开

打开时自动获取焦点避免重复点击

底部可以打开评论窗口同时添加点赞收藏按钮

至此详情页静态代码开发完毕下一篇我们讲解用户

代码地址
https://gitee.com/ddeatrr/springboot_vue_xhs

从零用java实现 小红书 springboot vue uniapp （3）详情页优化

从零用java实现小红书 springboot vue uniapp （3）详情页优化