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

相关推荐
三翼鸟数字化技术团队10 分钟前
Vue自定义指令最佳实践教程
前端·vue.js
腥臭腐朽的日子熠熠生辉19 分钟前
解决maven失效问题(现象:maven中只有jdk的工具包,没有springboot的包)
java·spring boot·maven
ejinxian20 分钟前
Spring AI Alibaba 快速开发生成式 Java AI 应用
java·人工智能·spring
杉之26 分钟前
SpringBlade 数据库字段的自动填充
java·笔记·学习·spring·tomcat
圈圈编码1 小时前
Spring Task 定时任务
java·前端·spring
Spark2381 小时前
关于vue3整合tiptap的slash菜单的ts支持
vue.js
俏布斯1 小时前
算法日常记录
java·算法·leetcode
随笔记1 小时前
Flex布局下,label标签设置宽度依旧对不齐,完美解决(flex-shrink属性)
javascript·css·vue.js
樊小肆1 小时前
实战!从 0 到 1 搭建 H5 AI 对话页面
前端·vue.js
27669582921 小时前
美团民宿 mtgsig 小程序 mtgsig1.2 分析
java·python·小程序·美团·mtgsig·mtgsig1.2·美团民宿