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

前言

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

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

首先先看效果

实现效果为
1.顶端全屏切换
2.上划加载更多
3.下拉当前页整体刷新
顶端全屏切换我们选择 gui-switch-navigation 结合 swiper swiper-item 进行实现
关键代码

			<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 直至没有页数 组件提示没有更多

		getNotes1(isReload){console.log('我开始请求了')this.apiLoadingStatus1 = true;const that = thisuni.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配置了

		{"path" : "pages/switchPages/index","style" :{"navigationBarTitleText": "小红书","navigationStyle" : "custom","enablePullDownRefresh":false,"disableScroll":true}}

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

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

@touchmove.stop.prevent="() => {}"

至此完美解决
当下拉时 我们只想刷新当前页 避免左右两个tab内容刷新

		reload  : function(){console.log(this.currentIndex)//根据当前index 确定清空的对象this['page'+(this.currentIndex+1)] = 1this['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