从零用java实现 小红书 springboot vue uniapp (2)主页优化

前言

移动端演示 http://8.146.211.120:8081/#/

前面的文章我们基本完成了主页的布局
今天我们具体的去进行实现 并且分享我开发时遇到的问题

首先先看效果

java仿小红书主页

实现效果为

1.顶端全屏切换

2.上划加载更多

3.下拉当前页整体刷新

顶端全屏切换我们选择 gui-switch-navigation 结合 swiper swiper-item 进行实现

关键代码

bash 复制代码
			<gui-switch-navigation
					 :activeLineClass="['gui-xhs-red']"
					 :isCenter="true"
					 activeDirection="center"
					 textAlign="center"
					:items="tabs"
					:size="150"
					:currentIndex="currentIndex"
					@change="navchange"></gui-switch-navigation>

	<swiper
				:current="currentIndex"
				@change="swiperChange"
				:style="{
					height:mainHeight+'px',
					width:'750rpx'
				}">
					<!-- 轮播项目数量对应 上面的选项标签 -->
					<swiper-item >
						<!-- 使用滚动区域来实现主体内容区域 -->
						<scroll-view
						:style="{height:mainHeight+'px'}"
						:scroll-y="true"
						class="gui-bg-gray"
						>.................

下滑加载更多

当页面滑动到底端时 我们执行获取笔记的方法
每页的条数需要请求偶数 否则会出现 左侧多一个元素(详情参照上篇文章 瀑布流的实现) 每请求一次 当前页码加1 直至没有页数 组件提示没有更多

bash 复制代码
		getNotes1(isReload){
			console.log('我开始请求了')
			this.apiLoadingStatus1 = true;
			const that = this
			uni.app.get('/notes', {limit:6,page:this.page1}, '', (res => {
				if (res.code == 200) {
					console.log('当前页'+that.page1)
					console.log('总页数'+res.data.pages)
					if(that.page1<=res.data.pages){
						let notes = res.data.records;

						var lArr = that.noteList1[0];
						var rArr = that.noteList1[1];
						//填充数组[此处的 notes 数据应该来自与api接口数据]
						//数据格式见 "/data/data.js"
						for (var i = 0; i < notes.length; i++) {
							if (i % 2 == 0) {
								lArr.push(notes[i]);
							} else {
								rArr.push(notes[i]);
							}
						}
						that.noteList1 = [lArr, rArr];

						if(that.page1==res.data.pages){
							that.$refs.guipage1.nomore();
						}else{
							that.page1 = that.page1 + 1;
							that.$refs.guipage1.stoploadmore();
						}
						that.apiLoadingStatus1 = false;
						that.pageLoading1  = false;

						if(isReload){
							this.$refs.guipage1.endReload();
						}
					}
				}
			}))
		},

当做到下拉刷新时 命名我们的uniapp配置了

bash 复制代码
		{
		    "path" : "pages/switchPages/index",
		    "style" :
		    {
		        "navigationBarTitleText": "小红书",
		        "navigationStyle" : "custom",
				"enablePullDownRefresh":false,
				"disableScroll":true

			}
		}

依然会出现页面整体下拉的情况

如图

导致下拉刷新失效 后来查阅很多资料 发现需要在页面的最外层加上

bash 复制代码
@touchmove.stop.prevent="() => {}"

至此完美解决

当下拉时 我们只想刷新当前页 避免左右两个tab内容刷新

bash 复制代码
		reload  : function(){
			console.log(this.currentIndex)
			//根据当前index 确定清空的对象
			this['page'+(this.currentIndex+1)] = 1
			this['noteList'+(this.currentIndex+1)].splice(0,1,[]);
			this['noteList'+(this.currentIndex+1)].splice(1,1,[]);
			this['getNotes'+(this.currentIndex+1)](1);
		},

这样就可以选择当前下标数据进行请求了 至

至此主页内容基本开发完毕 下一篇我们讲解 笔记详情

代码地址
https://gitee.com/ddeatrr/springboot_vue_xhs

相关推荐
小蒜学长27 分钟前
基于springboot 校园餐厅预约点餐微信小程序的设计与实现(代码+数据库+LW)
数据库·spring boot·微信小程序
码上暴富1 小时前
vue2迁移到vite[保姆级教程]
前端·javascript·vue.js
老华带你飞2 小时前
考研论坛平台|考研论坛小程序系统|基于java和微信小程序的考研论坛平台小程序设计与实现(源码+数据库+文档)
java·vue.js·spring boot·考研·小程序·毕设·考研论坛平台小程序
CHEN5_022 小时前
leetcode-hot100 11.盛水最多容器
java·算法·leetcode
songx_992 小时前
leetcode18(无重复字符的最长子串)
java·算法·leetcode
YAY_tyy2 小时前
基于 Vue3 + VueOffice 的多格式文档预览组件实现(支持 PDF/Word/Excel/PPT)
前端·javascript·vue.js·pdf·word·excel
在路上`3 小时前
前端学习之后端java小白(三)-sql外键约束一对多
java·前端·学习
dazhong20123 小时前
Spring Boot 项目新增 Module 完整指南
java·spring boot·后端
xrkhy3 小时前
SpringBoot之日志处理(logback和AOP记录操作日志)
java·spring boot·logback
搬山境KL攻城狮3 小时前
MacBook logback日志输出到绝对路径
java·intellij-idea·logback