优化预览动画

pages/album/myPhotoAlbum/myPhotoAlbum.vue

@@ -60,7 +60,7 @@
 		<!--预览-->
 		<view class="album-maskPreview" v-if="maskPreviewType==true" @click="maskPreviewType=false">
 			<view class="maskPreview-Num">{{previewNum+1}}/{{previewData.length}}</view>
-			<view class="maskPreview-img" @touchstart="start" @touchend="end" @touchmove="move">
+			<!-- <view class="maskPreview-img" @touchstart="start" @touchend="end" @touchmove="move">
 				<template v-if="previewData.length==1">
 					<image class="img-center" :src="previewData[previewNum].faceSourceUrl"></image>
 				</template>
@@ -73,10 +73,12 @@
 					<image class="img-right" :style="{right:touchRight2 +'rpx'}" v-if="previewNum==previewData.length-1" :src="previewData[0].faceSourceUrl||previewData[0].faceAiUrl"></image>
 					<image class="img-right" :style="{right:touchRight2 +'rpx'}" v-else :src="previewData[previewNum+1].faceSourceUrl||previewData[previewNum+1].faceAiUrl"></image>
 				</template>
-			</view>
+			</view> -->
+			<u-swiper class="maskPreview-swiper" height="794" :list="previewData" :effect3d="true" :autoplay="false" :mode="none" :current ="previewNum" @change="projectNumFun" ></u-swiper>
 			<view class="maskPreview-check" v-if="checkTypeFun==true">
 				<u-checkbox v-model="previewData[previewNum].checkType" @click.stop.native="()=>{}" @change="stopPhoto(previewNum)" shape="circle" class="maskPreview-Check"></u-checkbox>
 			</view>
+			
 		</view>
 		<!--明细-->
 		<view class="album-maskDetail" v-if="maskDetail==true">
@@ -105,15 +107,22 @@ import uPicker from '@/uview-ui/components/u-picker/u-picker.vue'
 import uCheckboxGroup from '@/uview-ui/components/u-checkbox-group/u-checkbox-group.vue'
 import uCheckbox from '@/uview-ui/components/u-checkbox/u-checkbox'
 import uToast from '@/uview-ui/components/u-toast/u-toast.vue'
+import Uswiper from '@/uview-ui/components/u-toast/u-toast.vue'
 export default {
   components: {
     uPicker,
     uCheckboxGroup,
     uCheckbox,
-    uToast
+    uToast,
+    Uswiper
   },
   data() {
     return {
+      background: ['color1', 'color2', 'color3'],
+      indicatorDots: false,
+      autoplay: false,
+      interval: 2000,
+      duration: 500,
       faceIds: [], //查询照片ID
       openid:'',
       orderShow: false, //头部城市选择
@@ -215,6 +224,8 @@ export default {
             item['checkType'] = false
             this.originalPrice = item.originalPrice//原价.
             this.sellingPrice = item.sellingPrice//售价
+            item['image']=item.faceSourceUrl||item.faceAiUrl
+            item['title']=''
           })
 		    }else{
 		      this.$refs.uToast.show({
@@ -241,6 +252,9 @@ export default {
       this.previewNum = index
       this.maskPreviewType = true
     },
+    projectNumFun(e){//当前滑动到第几张
+      this.previewNum = e
+    },
     stopPhoto(index){//刷新显示
       if(this.checkProjectAll==true){
         this.checkProjectAll=false
@@ -289,73 +303,6 @@ export default {
         this.projectMoreType = false
       }
     },
-    // 触摸touch事件
-    start(e) { //@touchstart 触摸开始
-      this.transition = '.1s'
-      this.startData.clientX = e.changedTouches[0].clientX //手指按下时的X坐标         
-      this.startData.clientY = e.changedTouches[0].clientY //手指按下时的Y坐标
-    },
-    end(e) { //@touchend触摸结束
-      this.transition = '.5s'
-      if (Math.abs(this.touch.clientX - this.startData.clientX) > 100) { //在事件结束时，判断滑动的距离是否达到出发需要执行事件的要求
-        console.log('执行查看跳转事件')
-        // this.touch = {};
-        //动画结束后回到原位 切换图片
-        this.touchLeft0 = -466
-				
-        this.touchLeft = 0
-        this.touchRight = 0
-				
-        this.touchRight2 = -466
-        //判断当前应该显示哪张照片
-        if (this.touchType == 1) {
-          if (this.previewNum == 0) {
-            this.previewNum = this.previewData.length - 1
-          } else {
-            this.previewNum--
-          }
-        } else {
-          if (this.previewNum == this.previewData.length - 1) {
-            this.previewNum = 0
-          } else {
-            this.previewNum++
-          }
-        }
-      } else {
-        console.log('滑动距离不够，不执行跳转')
-        // this.touch = {};
-        //动画结束后回到原位
-        this.touchLeft0 = -466
-        this.touchRight0 = 0
-        
-        this.touchLeft = 0
-        this.touchRight = 0
-        
-        this.touchLeft2 = 0
-        this.touchRight2 = -466
-      }
-    },
-    move(event) { //@touchmove触摸移动
-      let touch = event.touches[0] //滑动过程中，手指滑动的坐标信息 返回的是Objcet对象
-      this.touch = touch
-      let data = touch.clientX - this.startData.clientX
-      if (touch.clientX < this.startData.clientX) { //向左移动
-        console.log('左滑动')
-        //方向RPX值
-        this.touchRight = this.startData.clientX - touch.clientX
-        this.touchLeft0 = this.touchLeft0 + this.startData.clientX - touch.clientX
-        this.touchRight2 = this.touchRight2 + this.startData.clientX - touch.clientX
-        this.touchType = 0
-      }
-      if (touch.clientX > this.startData.clientX) { //向右移动
-        console.log('右滑动')
-        //方向RPX值
-        this.touchLeft = touch.clientX - this.startData.clientX
-        this.touchLeft0 = this.touchLeft0 + this.startData.clientX - touch.clientX
-        this.touchRight2 = this.touchRight2 + this.startData.clientX - touch.clientX
-        this.touchType = 1
-      }
-    },
     upLoad(){//下单
       var data = {
 			  orderMoney:this.sellingPrices,//订单总价
@@ -707,7 +654,7 @@ export default {
 		bottom: 98rpx;
 		left: 0;
 		z-index: 24;
-		background-color: rgba(0, 0, 0, .3);
+		background-color: rgba(0, 0, 0, .9);
 
 		.maskDetail-content {
 			width: 100%;
@@ -788,7 +735,7 @@ export default {
 		bottom: 98rpx;
 		left: 0;
 		z-index: 22;
-		background-color: rgba(0, 0, 0, .3);
+		background-color: rgba(0, 0, 0, .9);
 
 		.maskPreview-Num {
 			font-size: 28rpx;
@@ -816,6 +763,7 @@ export default {
 				left: -466rpx;
 				top: 0;
 				bottom: 0;
+				z-index: 29;
 			}
 
 			.img-right {
@@ -827,6 +775,7 @@ export default {
 				right: -466rpx;
 				top: 0;
 				bottom: 0;
+				z-index: 29;
 			}
 
 			.img-center {
@@ -839,9 +788,18 @@ export default {
 				top: 0;
 				bottom: 0;
 				left: 0;
+				z-index: 30;
 			}
 		}
-
+		.maskPreview-swiper{
+			width: 100%;
+			position: fixed;
+			top: 152rpx;
+			left: 0;
+		}
+		/deep/ swiper{
+			background-color: rgba(0, 0, 0, 0) !important;
+		}
 		.maskPreview-check {
 			width: 48rpx;
 			height: 48rpx;