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

前言

移动端演示 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

相关推荐
萌萌哒草头将军4 小时前
⚡⚡⚡尤雨溪宣布开发 Vite Devtools,这两个很哇塞 🚀 Vite 的插件,你一定要知道!
前端·vue.js·vite
_一条咸鱼_4 小时前
揭秘 Android TextInputLayout:从源码深度剖析其使用原理
android·java·面试
_一条咸鱼_4 小时前
揭秘!Android VideoView 使用原理大起底
android·java·面试
_一条咸鱼_4 小时前
深度揭秘!Android TextView 使用原理全解析
android·java·面试
小彭努力中4 小时前
7.Three.js 中 CubeCamera详解与实战示例
开发语言·前端·javascript·vue.js·ecmascript
_一条咸鱼_4 小时前
深度剖析:Android Canvas 使用原理全揭秘
android·java·面试
_一条咸鱼_4 小时前
深度剖析!Android TextureView 使用原理全揭秘
android·java·面试
_一条咸鱼_4 小时前
揭秘!Android CheckBox 使用原理全解析
android·java·面试