feat: 弹框滑动

components/ModelData/ModelData.vue

 <template>
-	<u-modal class="model-data" v-model="show" title="明细" @close="close"
-		@confirm="close">
-		<view class="slot-content" @touchstart="touchStart" @touchmove="touchMove" @touchend="touchEnd"
-			:animation="animationData">
-			<view v-for="(val, key) in popupObject" :key="key" class="data-view">
+  <u-modal
+    class="model-data"
+    v-model="show"
+    title="明细"
+    @close="close"
+    @confirm="close"
+  >
+    <view class="slot-content">
+      <swiper
+        class="swiper"
+        circular
+        :current="currentIndex"
+        :style="{ height: `${height}px` }"
+      >
+        <swiper-item v-for="item in popupData">
+          <view v-for="(val, key) in item" :key="key" 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>
+              <u-image
+                :height="100"
+                mode="aspectFit"
+                :src="val"
+                crossOrigin="anonymous"
+                class="data-image"
+                @click="seeImage(key)"
+              ></u-image>
             </template>
             <view v-else class="data-val ellipsis">{{ val }}</view>
           </view>
+        </swiper-item>
+      </swiper>
     </view>
   </u-modal>
 </template>
 
 <script>
-	export default {
+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: -1,
-			}
+    return {}
   },
   props: {
     popupData: {
@@ -48,21 +58,8 @@
       default: () => {}
     }
   },
-		created() {
-			this.animation = uni.createAnimation({
-				timingFunction: 'ease',
-				duration: 120
-			})
-		},
+  created() {},
   computed: {
-			popupObject: {
-				get() {
-					return this.popupData[this.currentIndex]
-				},
-				set(val) {
-					return val
-				}
-			},
     show: {
       get() {
         return this.popupShow
@@ -70,124 +67,58 @@
       set(val) {
         return val
       }
+    },
+    height() {
+      const keys = Object.keys(this.popupData[0])
+      const customRenderKeys = Object.keys(this.customRender)
+      return keys.length * 30 + customRenderKeys.length * 50
     }
   },
 
   methods: {
     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) {
-				if(this.index === -1) {
-					this.index = this.currentIndex
-				}
-				
-				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 < -40) {
-						state = 1;
-					} else if (moveX > 40) {
-						state = -1;
-					}
-				}
-				this.like_state = state;
-				this.moveX = moveX;
-				this.moveY = moveY;
-			},
-			touchEnd(event) {
-				if (Math.abs(this.moveX) > 40 && 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: 50
-							})
-							.translateX('100%').step({
-								duration: 50
-							})
-							.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])
-					}
-					if (state === -1 && this.index > 0) {
-						this.animation.translateX('100%').step()
-							.opacity(0).step({
-								duration: 50
-							})
-							.translateX('-100%').step({
-								duration: 50
-							})
-							.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;
-	}
+  line-height: 30px;
+  padding: 0 5px;
+}
 
-	.data-key {
+.data-key {
   min-width: 28%;
   margin-right: 10px;
   border-right: 1px solid #eee;
-	}
+}
+.data-image {
+  width: 100%;
+}
+.swiper {
+  overflow-y: auto;
+}
 </style>