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

前言

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

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

首先先看效果

java仿小红书主页

实现效果为
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 = 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配置了

		{
		    "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)] = 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