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

相关推荐
FreeBuf_6 分钟前
Apache组件遭大规模攻击:Tomcat与Camel高危RCE漏洞引发数千次利用尝试
java·tomcat·apache
Hexene...11 分钟前
【前端Vue】如何实现echarts图表根据父元素宽度自适应大小
前端·vue.js·echarts
初遇你时动了情13 分钟前
腾讯地图 vue3 使用 封装 地图组件
javascript·vue.js·腾讯地图
无妄-202417 分钟前
软件架构升级中的“隐形地雷”:版本选型与依赖链风险
java·服务器·网络·经验分享
qqxhb21 分钟前
零基础数据结构与算法——第四章:基础算法-排序(上)
java·数据结构·算法·冒泡·插入·选择
华子w90892585927 分钟前
基于 SpringBoot+VueJS 的农产品研究报告管理系统设计与实现
vue.js·spring boot·后端
猴哥源码1 小时前
基于Java+SpringBoot的在线小说阅读平台
java·spring boot
lingRJ7771 小时前
从混沌到掌控:基于OpenTelemetry与Prometheus构建分布式调用链监控告警体系
java·springboot·prometheus·backend·opentelemetry·jaeger·microservices
星辰离彬1 小时前
Java 与 MySQL 性能优化:Java应用中MySQL慢SQL诊断与优化实战
java·后端·sql·mysql·性能优化
程序猿小D3 小时前
[附源码+数据库+毕业论文]基于Spring+MyBatis+MySQL+Maven+jsp实现的个人财务管理系统,推荐!
java·数据库·mysql·spring·毕业论文·ssm框架·个人财务管理系统