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

相关推荐
Jane - UTS 数据传输系统38 分钟前
处理VUE框架中,ElementUI控件u-table空值排序问题
前端·vue.js·elementui·字符串 空值处理
hyf_code39 分钟前
Midjourney Describe API 的对接和使用
java·服务器·midjourney
hshpy1 小时前
why spring boot not load NacosConfigBootstrapConfiguration class
java·spring boot·后端
野蛮的大西瓜1 小时前
评估一套呼叫中心大模型呼出机器人的投入回报比?
java·语言模型·自然语言处理·机器人·信息与通信
野蛮的大西瓜1 小时前
大模型呼出机器人能够解决哪些问题?
java·人工智能·语言模型·自然语言处理·机器人·信息与通信
笨鸟先飞,笨猪先肥1 小时前
java泛型
java·开发语言
小安同学iter1 小时前
Java web - 后端开发
java·jvm·maven·intellij-idea
她似晚风般温柔7891 小时前
Vue3 + Element-Plus + vue-draggable-plus 实现图片拖拽排序和图片上传到阿里云 OSS 父组件实现真正上传(最新保姆级)
javascript·vue.js·阿里云
一枚前端小姐姐2 小时前
获取地址栏参数并重定向
前端·javascript·vue.js
天边一坨浮云2 小时前
金蝶云苍穹踩过的坑(慢慢更新)
java·ide·intellij-idea