feat: popup data add swipe

components/HorizontalBar/HorizontalBar.vue

@@ -94,7 +94,8 @@ export default {
         } else if (popup) {
           uni.$emit('showBarDetail', {
             popupShow: true,
-            popupData: data[event.dataIndex],
+            popupData: data,
+			currentIndex: event.dataIndex,
             customRender
           })
         } else {

components/ModelData/ModelData.vue

 <template>
-  <u-modal
-    class="model-data"
-    v-model="popupShow"
-    :closeOnClickOverlay="true"
-    title="明细"
-    @close="close"
-    @confirm="close"
-  >
-    <view class="slot-content">
-      <view v-for="(val, key) in popupData" class="data-view">
+	<u-modal class="model-data" v-model="popupShow" :closeOnClickOverlay="true" title="明细" @close="close"
+		@confirm="close">
+		<view class="slot-content" @touchstart="touchStart" @touchmove="touchMove" @touchend="touchEnd"
+			:animation="animationData">
+			<view v-for="(val, key) in popupObject" class="data-view">
 				<view class="data-key ellipsis">{{ key }}</view>
 				<template v-if="customRender[key] === 'picture'">
-          <u-image
-            :height="100"
-            mode="aspectFit"
-            :src="val"
-            crossOrigin="anonymous"
-            style="width: 100%"
-            @click="seeImage(val)"
-          ></u-image>
+					<u-image :height="100" mode="aspectFit" :src="val" crossOrigin="anonymous" style="width: 100%"
+						@click="seeImage(key)"></u-image>
 				</template>
 				<view v-else class="data-val ellipsis">{{ val }}</view>
 			</view>
@@ -27,15 +16,28 @@
 </template>
 
 <script>
-export default {
+	export default {
 		name: 'ModelData',
 		data() {
-    return {}
+			return {
+				// popupObject: {},
+				startX: 0, //滑动开始x轴位置
+				startY: 0, //滑动开始y轴位置
+				moveX: 0, //滑动的x轴距离
+				moveY: 0, //滑动的y轴距离
+				like_state: 0, //-1：左滑，0：没滑动，1：右滑
+				animationData: {},
+				index: 0,
+			}
 		},
 		props: {
 			popupData: {
-      type: Object,
-      default: () => {}
+				type: Array,
+				default: () => []
+			},
+			currentIndex: {
+				tyep: Number,
+				default: 0
 			},
 			popupShow: {
 				type: Boolean,
@@ -46,43 +48,131 @@ export default {
 				default: () => {}
 			}
 		},
+		created() {
+			this.animation = uni.createAnimation({
+				timingFunction: 'ease',
+				duration: 120
+			})
+		},
+		computed: {
+			popupObject: {
+				get() {
+					this.index = this.currentIndex
+					return this.popupData[this.currentIndex]
+				},
+				set(val) {
+					return val
+				}
+			}
+		},
 		methods: {
 			close() {
 				uni.$emit('showBarDetail', {
 					popupShow: false,
-        popupData: {}
+					popupData: []
 				})
 			},
-    seeImage(url) {
+			seeImage(key) {
+				var images = []
+				this.popupData.forEach(item => {
+					images.push(item[key])
+				})
 				uni.previewImage({
-        current: 0,
-        urls: [url]
+					current: this.index,
+					urls: images
 				})
+			},
+			touchStart(event) {
+				this.startX = event.touches[0].pageX;
+				this.startY = event.touches[0].pageY;
+			},
+			touchMove(event) {
+				var currentX = event.touches[0].pageX;
+				var currentY = event.touches[0].pageY;
+				var moveX = currentX - this.startX;
+				var moveY = currentY - this.startY;
+				var state = 0; //-1：左滑，0：没滑动，1：右滑
+				// //左右方向滑动
+				if (Math.abs(moveX) > Math.abs(moveY)) {
+					if (moveX < -10) {
+						state = 1;
+					} else if (moveX > 10) {
+						state = -1;
+					}
+				}
+				this.like_state = state;
+				this.moveX = moveX;
+				this.moveY = moveY;
+			},
+			touchEnd(event) {
+				if (Math.abs(this.moveX) > 60 && this.like_state != -100) {
+					var state = this.like_state
+					this.like_state = -100 //设置这个数是为了避免滑动之后点击不走touchMove而产生的不正常滑动
+					//这里放需要进行的业务逻辑
+					if (state === 1 && this.index < this.popupData.length - 1) {
+						this.animation.translateX('-100%').step()
+							.opacity(0).step({
+								duration: 10
+							})
+							.translateX('100%').step({
+								duration: 10
+							})
+							.translateX(0).opacity(1).step()
+
+						this.animationData = this.animation.export()
+						// 为避免uniapp动画只有第一次生效，必须延迟删除动画实例数据
+						setTimeout(() => {
+							this.animationData = {}
+						}, 250)
+						this.index += 1
+					}
+					if (state === -1 && this.index > 0) {
+						this.animation.translateX('100%').step()
+							.opacity(0).step({
+								duration: 10
+							})
+							.translateX('-100%').step({
+								duration: 10
+							})
+							.translateX(0).opacity(1).step()
+
+						this.animationData = this.animation.export()
+						// 为避免uniapp动画只有第一次生效，必须延迟删除动画实例数据
+						setTimeout(() => {
+							this.animationData = {}
+						}, 250)
+						this.index -= 1
+					}
+					this.$set(this.popupObject, '', this.popupData[this.index])
+				}
+			}
 		}
 	}
-}
 </script>
 
 <style scoped>
-.model-data {
+	.model-data {
 		position: relative;
 		z-index: 9999999;
-}
-.slot-content {
+	}
+
+	.slot-content {
 		margin: 10px;
 		font-size: 12px;
 		border: 1px solid #eee;
 		border-radius: 5px;
-}
-.data-view {
+	}
+
+	.data-view {
 		display: flex;
 		align-self: center;
 		border-bottom: 1px solid #eee;
 		padding: 5px;
-}
-.data-key {
+	}
+
+	.data-key {
 		min-width: 28%;
 		margin-right: 10px;
 		border-right: 1px solid #eee;
-}
+	}
 </style>

pages/index/index.vue

@@ -64,6 +64,7 @@
 			style="position: relative;z-index: 99999;"
 			:popupShow="popupShow" 
 			:popupData="popupData"
+			:currentIndex="currentIndex"
 			:customRender="customRender"
 		></ModelData>
 	</view>
@@ -80,7 +81,8 @@
 				horizontalBarHeight: 0,
 				popupShow: false,
 				popupData: {},
-				customRender: {}
+				customRender: {},
+				currentIndex: 0
 			}
 		},
 		computed: {
@@ -156,9 +158,10 @@
 				that.horizontalBarHeight = height
 			})
 			uni.$on('showBarDetail', data => {
-				const { popupShow, popupData, customRender } = data
+				const { popupShow, popupData, customRender, currentIndex } = data
 				that.popupShow = popupShow
 				that.popupData = popupData
+				that.currentIndex = currentIndex
 				that.customRender = customRender
 			})
 		},