feat: popup data view style

components/HorizontalBar/HorizontalBar.vue

@@ -99,7 +99,7 @@ export default {
             eventName = 'indexShowBar'
           } else {
             eventName = 'detailShowBar'
-          }
+          }
           uni.$emit(eventName, {
             page: curRoute,
             popupShow: true,

components/ModelData/ModelData.vue

@@ -27,7 +27,7 @@
 				moveY: 0, //滑动的y轴距离
 				like_state: 0, //-1：左滑，0：没滑动，1：右滑
 				animationData: {},
-				index: 0,
+				index: -1,
 			}
 		},
 		props: {
@@ -53,11 +53,10 @@
 				timingFunction: 'ease',
 				duration: 120
 			})
-		},
+		},
 		computed: {
 			popupObject: {
-				get() {
-					this.index = this.currentIndex
+				get() {
 					return this.popupData[this.currentIndex]
 				},
 				set(val) {
@@ -72,22 +71,33 @@
 					return val
 				}
 			}
-		},
+		},
+		
 		methods: {
-			close() {
+			close() {
+				this.index = -1
 				this.$emit('close')
 			},
 			seeImage(key) {
+				if(this.index === -1) {
+					this.index = this.currentIndex
+				}
 				var images = []
 				this.popupData.forEach(item => {
 					images.push(item[key])
-				})
+				})
 				uni.previewImage({
 					current: this.index,
 					urls: images
-				})
+				})
+				// 图片查看弹窗会使页面close，所以需要把index置为-1
+				this.index = -1
 			},
-			touchStart(event) {
+			touchStart(event) {
+				if(this.index === -1) {
+					this.index = this.currentIndex
+				}
+				
 				this.startX = event.touches[0].pageX;
 				this.startY = event.touches[0].pageY;
 			},
@@ -99,9 +109,9 @@
 				var state = 0; //-1：左滑，0：没滑动，1：右滑
 				// //左右方向滑动
 				if (Math.abs(moveX) > Math.abs(moveY)) {
-					if (moveX < -10) {
+					if (moveX < -40) {
 						state = 1;
-					} else if (moveX > 10) {
+					} else if (moveX > 40) {
 						state = -1;
 					}
 				}
@@ -110,17 +120,18 @@
 				this.moveY = moveY;
 			},
 			touchEnd(event) {
-				if (Math.abs(this.moveX) > 60 && this.like_state != -100) {
+				if (Math.abs(this.moveX) > 40 && this.like_state != -100) {
+					console.log("this index = " , this.index)
 					var state = this.like_state
 					this.like_state = -100 //设置这个数是为了避免滑动之后点击不走touchMove而产生的不正常滑动
 					//这里放需要进行的业务逻辑
-					if (state === 1 && this.index < this.popupData.length - 1) {
+					if (state === 1 && this.index < this.popupData.length - 1) {
 						this.animation.translateX('-100%').step()
 							.opacity(0).step({
-								duration: 10
+								duration: 50
 							})
 							.translateX('100%').step({
-								duration: 10
+								duration: 50
 							})
 							.translateX(0).opacity(1).step()
 
@@ -129,15 +140,18 @@
 						setTimeout(() => {
 							this.animationData = {}
 						}, 250)
-						this.index += 1
+						this.index += 1
+						// this.popupObject = this.popupData[this.index]
+						this.$set(this.popupObject, '', this.popupData[this.index])
+						console.log("end this index = " , this.index)
 					}
 					if (state === -1 && this.index > 0) {
 						this.animation.translateX('100%').step()
 							.opacity(0).step({
-								duration: 10
+								duration: 50
 							})
 							.translateX('-100%').step({
-								duration: 10
+								duration: 50
 							})
 							.translateX(0).opacity(1).step()
 
@@ -147,8 +161,11 @@
 							this.animationData = {}
 						}, 250)
 						this.index -= 1
-					}
-					this.$set(this.popupObject, '', this.popupData[this.index])
+						// this.popupObject = this.popupData[this.index]
+						this.$set(this.popupObject, '', this.popupData[this.index])
+						console.log("end this index = " , this.index)
+					}
+					console.log("popupObject = ", this.popupObject)
 				}
 			}
 		}