feat:详情页左右切换页面功能

pages/details/details.vue

 <template>
-	<view class="viewport-wrapper" :style="[styleObject]" @touchstart.stop="handleTouchstart" @touchend.stop="handleTouchend">
+	<view class="viewport-wrapper" :style="[styleObject]">
+		<u-icon class="left-button" name="arrow-left" @click="handleLeftAction()"></u-icon>
+		<u-icon class="right-button" name="arrow-right" @click="handleRightAction()"></u-icon>
 		<template v-for="(element, index) in reportInfo.list">
 			<view
 				class="view-element"
@@ -66,6 +68,7 @@
 				detailId: "",
 				idList: [],
 				indexs: 0,
+				pageSize: 0,
 				timename: null,
 				pageScrollTop: 0,
 				horizontalBarHeight: 0
@@ -99,6 +102,12 @@
 			this.detailId = option.id
 			this.idList = option.idList.split(",")
 			this.indexs = this.idList.findIndex((item)=>item === this.detailId)
+			this.pageSize = option.pageSize
+			//如果是最后一个元素，需要提前加载后面列表数据
+			if (this.indexs == this.idList.length-1) {
+				console.log("xiayiye")
+				this.getReportIdList()
+			}
 			this.getReportCharts()
 		},  
 		onShow() {
@@ -227,40 +236,27 @@
 			},
 			
 			/**
-			 * 获取鼠标、手指初始位置
+			 * 点击向左切换按钮
 			 */
-			handleTouchstart(e) {
-				this.startTime = Date.now();
-				this.startX = e.changedTouches[0].clientX;
-				this.startY = e.changedTouches[0].clientY;
+			handleLeftAction() {
+				this.indexs--
+				if (this.indexs<0) {
+					this.indexs = 0
+					return
+				}
+				this.handlePage()
 			},
 			
 			/**
-			 * 计算鼠标、手指偏移方向
+			 * 点击向右切换按钮
 			 */
-			handleTouchend(e) {
-				const endTime = Date.now();
-				const length = this.lengths - 1;
-				const endX = e.changedTouches[0].clientX;
-				const endY = e.changedTouches[0].clientY;
-				const differ = Math.abs(endY - this.startY);
-				const dirvalX = endX - this.startX;
-				// 纵轴偏移量不得超过 30，否则默认页面进行滚动操作
-				if (differ <= 30) {
-					// 按下时长不得超过 2秒，X轴滑动距离必须大于 40
-					if (endTime - this.startTime > 2000 || Math.abs(dirvalX) <= 40) {
+			handleRightAction() {
+				this.indexs++
+				if (this.indexs>this.idList.length-1) {
+					this.indexs--
 					return
-					};
-					// 判断滑动方向
-					if (dirvalX > 0) {
-						this.indexs--;
-						if (this.indexs <= 0) this.indexs = 0;
-					} else if (dirvalX < 0){
-						this.indexs++;
-						if (this.indexs >= length) this.indexs = length;
 				}
 				this.handlePage()
-				}
 			},
 
 			/**
@@ -273,8 +269,33 @@
 				uni.redirectTo({
 				    url: url
 				})
+			},
+			
+			/**
+			 * 请求下一页的列表id
+			 */
+			async getReportIdList() {
+				var pageNumber = parseInt((this.idList.length-1) / this.pageSize)+2
+				var list = []
+				const that = this
+				var param = {"pageSize":that.pageSize, "pageNumber":pageNumber, "folderId":"621db7710668d7e647d5f4cc", "superAdmin":true}
+				let res = await that.$u.api.getReportList(param)
+				const { Status, Result } = res.data
+				if (Status === 'true') {
+					if (pageNumber === 1) {
+						list = Result.content
+					} else {
+						list = that.reportList.concat(Result.content)
 					}
 						
+					if (list.length>0) {
+						for (var i=0; i<list.length; i++){
+							var obj = list[i]
+							that.idList.push(obj.id)
+						}
+					}
+				}
+			}
 		},
 		onPullDownRefresh() {
 			this.getReportCharts()
@@ -286,6 +307,7 @@
 </script>
 
 <style lang="scss" scoped>
+	
 .viewport-wrapper {
 	position: relative;
 	height: 100%;
@@ -295,9 +317,25 @@
 	background-size: cover;
 	background-position: center;
 }
+
 .view-element {
 	position: absolute;
 	user-select: none;
 	cursor: move;
 }
+
+.left-button {
+	position: fixed;
+	bottom: 50%;
+	left: 10px;
+	z-index: 99;
+}
+
+.right-button {
+	position: fixed;
+	bottom: 50%;
+	right: 10px;
+	z-index: 99;
+}
+
 </style>

pages/reports/reports.vue

@@ -72,8 +72,7 @@
 					var obj = this.reportList[i]
 					idList.push(obj.id)
 				}
-				const url = "/pages/details/details?id=" + item.id + "&idList=" + idList
-				console.log(url)
+				const url = "/pages/details/details?id=" + item.id + "&idList=" + idList +"&pageSize=" + this.params.pageSize
 				uni.navigateTo({
 				    url: url
 				})