从零用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

相关推荐
拾光拾趣录3 分钟前
虚拟DOM
前端·vue.js·dom
天河归来4 分钟前
springboot框架redis开启管道批量写入数据
java·spring boot·redis
合作小小程序员小小店9 分钟前
web网页,在线%食谱推荐系统%分析系统demo,基于vscode,uniapp,vue,java,jdk,springboot,mysql数据库
vue.js·spring boot·vscode·spring·uni-app
张先shen12 分钟前
Elasticsearch RESTful API入门:全文搜索实战
java·大数据·elasticsearch·搜索引擎·全文检索·restful
codervibe13 分钟前
如何用 Spring Security 构建无状态权限控制系统(含角色菜单控制)
java·后端
codervibe16 分钟前
项目中如何用策略模式实现多角色登录解耦?(附实战代码)
java·后端
TCChzp18 分钟前
synchronized全链路解析:从字节码到JVM内核的锁实现与升级策略
java·jvm
别跟老夫聊头发19 分钟前
vue缩放/放大时,实时更新/变换显示高度
vue.js
大葱白菜19 分钟前
🧩 Java 枚举详解:从基础到实战,掌握类型安全与优雅设计
java·程序员
拾光拾趣录21 分钟前
Vue Router 执行顺序
前端·vue.js·vue-router