feat: popup data add swipe

components/HorizontalBar/HorizontalBar.vue

@@ -91,10 +91,11 @@ export default {
             current: event.dataIndex,
             urls: urls
           })
-        } else if (popup) {
+        } 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">
-        <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>
-        </template>
-        <view v-else class="data-val ellipsis">{{ val }}</view>
-      </view>
-    </view>
-  </u-modal>
-</template>
-
-<script>
-export default {
-  name: 'ModelData',
-  data() {
-    return {}
-  },
-  props: {
-    popupData: {
-      type: Object,
-      default: () => {}
-    },
-    popupShow: {
-      type: Boolean,
-      default: false
-    },
-    customRender: {
-      type: Object,
-      default: () => {}
-    }
-  },
-  methods: {
-    close() {
-      uni.$emit('showBarDetail', {
-        popupShow: false,
-        popupData: {}
-      })
-    },
-    seeImage(url) {
-      uni.previewImage({
-        current: 0,
-        urls: [url]
-      })
-    }
-  }
-}
-</script>
-
-<style scoped>
-.model-data {
-  position: relative;
-  z-index: 9999999;
-}
-.slot-content {
-  margin: 10px;
-  font-size: 12px;
-  border: 1px solid #eee;
-  border-radius: 5px;
-}
-.data-view {
-  display: flex;
-  align-self: center;
-  border-bottom: 1px solid #eee;
-  padding: 5px;
-}
-.data-key {
-  min-width: 28%;
-  margin-right: 10px;
-  border-right: 1px solid #eee;
-}
+<template>
+	<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(key)"></u-image>
+				</template>
+				<view v-else class="data-val ellipsis">{{ val }}</view>
+			</view>
+		</view>
+	</u-modal>
+</template>
+
+<script>
+	export default {
+		name: 'ModelData',
+		data() {
+			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: Array,
+				default: () => []
+			},
+			currentIndex: {
+				tyep: Number,
+				default: 0
+			},
+			popupShow: {
+				type: Boolean,
+				default: false
+			},
+			customRender: {
+				type: Object,
+				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: []
+				})
+			},
+			seeImage(key) {
+				var images = []
+				this.popupData.forEach(item => {
+					images.push(item[key])
+				})
+				uni.previewImage({
+					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 {
+		position: relative;
+		z-index: 9999999;
+	}
+
+	.slot-content {
+		margin: 10px;
+		font-size: 12px;
+		border: 1px solid #eee;
+		border-radius: 5px;
+	}
+
+	.data-view {
+		display: flex;
+		align-self: center;
+		border-bottom: 1px solid #eee;
+		padding: 5px;
+	}
+
+	.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
 			})
 		},