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

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

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