feat:详情页左右滑动切换

pages/details/details.vue

 <template>
-	<view class="viewport-wrapper" :style="[styleObject]">
+	<view class="viewport-wrapper" :style="[styleObject]" @touchstart.stop="handleTouchstart" @touchend.stop="handleTouchend">
 		<template v-for="(element, index) in reportInfo.list">
 			<view
 				class="view-element"
@@ -64,6 +64,8 @@
 			return {
 				reportInfo: {},
 				detailId: "",
+				idList: [],
+				indexs: 0,
 				timename: null,
 				pageScrollTop: 0,
 				horizontalBarHeight: 0
@@ -95,6 +97,8 @@
 		}, 
 		onLoad(option) {
 			this.detailId = option.id
+			this.idList = option.idList.split(",")
+			this.indexs = this.idList.findIndex((item)=>item === this.detailId)
 			this.getReportCharts()
 		},  
 		onShow() {
@@ -220,14 +224,64 @@
 						return item
 					})
 				}
+			},
+			
+			/**
+			 * 获取鼠标、手指初始位置
+			 */
+			handleTouchstart(e) {
+				this.startTime = Date.now();
+				this.startX = e.changedTouches[0].clientX;
+				this.startY = e.changedTouches[0].clientY;
+			},
+			
+			/**
+			 * 计算鼠标、手指偏移方向
+			 */
+			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) {
+						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()
+				}
+			},
+			
+			/**
+			 * 跳转到indexs页面
+			 */
+			handlePage() {
+				var idstr = this.idList[this.indexs]
+				const url = "/pages/details/details?id=" + idstr + "&idList=" + this.idList
+				console.log(url)
+				uni.redirectTo({
+				    url: url
+				})
 			}
+
 		},
 		onPullDownRefresh() {
 			this.getReportCharts()
 		},
 		onPageScroll(res) {
 			this.pageScrollTop = res.scrollTop
-		},
+		}
 	}
 </script>
 

pages/details/scrollview.vue

-<template>
-	<scroll-view scroll-x="true">
-		<block v-for="(item,index) in idlist">
-			<view>123</view>
-		</block>
-	</scroll-view>
-</template>
-
-<script>
-	export default {
-		data() {
-			return {
-				detailId: "",
-				idlist:[]
-			}
-		},
-		computed: {
-			
-		}, 
-		onLoad(option) {
-			this.detailId = option.id
-			this.idList = option.ids.split(",")
-			console.log(this.detailId)
-			console.log(this.idList)
-		},  
-		onShow() {
-			
-		},
-		onUnload() {
-			
-		},
-		methods: {
-			
-		},
-	}
-</script>
-
-<style>
-	
-</style>

pages/reports/reports.vue

@@ -67,7 +67,13 @@
 			
 			// 点击查看
 			onClick(item) {
-				const url = "/pages/details/details?id=" + item.id
+				var idList = []
+				for (var i=0; i<this.reportList.length; i++){
+					var obj = this.reportList[i]
+					idList.push(obj.id)
+				}
+				const url = "/pages/details/details?id=" + item.id + "&idList=" + idList
+				console.log(url)
 				uni.navigateTo({
 				    url: url
 				})