no message

components/dgex-tantan/dgex-tantan.vue

@@ -8,8 +8,8 @@
 		<view
 
 			@touchmove.stop.capture="touchMove($event,currentIndex)"
-			@touchend.capture="touchEnd(currentIndex)"
-      @touchstart.capture="touchStart($event,currentIndex)"
+			@touchend.stop.capture="touchEnd(currentIndex)"
+      @touchstart.stop.capture="touchStart($event,currentIndex)"
           class="tantan-slide-box">
 			<template v-for="(item, index) in list">
 				<view class="tantan-slide-box-item"
@@ -19,11 +19,12 @@
 					:style="[cardTransform(item, index), {
 						'zIndex': list.length - index,
 						'opacity': currentIndex + visible - 1 >= index && currentIndex <= index ? 1 : 0,
-						                        'transform': 'rotate(' + ((item.x || 0) / 30 ) +  'deg) translate3d(' + (item.x || 0) + 'px,' + (item.y || 0) + 'px, '+  0  +'px)'
+            'transform': 'rotate(' + ((item.moveX || 0) / 30 ) +  'deg) translateX(' + (item.moveX || 0) + 'px)'
 					}]">
+<!--         -->
 					 <!-- 加载图片会闪屏 双if避免 -->
 					<template v-if="currentIndex + visible >= index && currentIndex <= index">
-            <view  :animation="animationData" class="tantan-slide-img-box"   :style="{height: winHeight + 'px'}">
+            <view :animation="animationData"  class="tantan-slide-img-box"   :style="{height: winHeight + 'px'}">
               <scroll-view class="tantan-slide-img-scroll-box" :bindscroll="endScroll"  :scroll-y="!ifLongTap" :style="{height: item.boxHeight + 'px',width:item.boxWidth+'px'}">
               <view class="img-list tantan-slide-img">
                   <swiper  :style="{height: item.boxHeight + 'px',width:item.boxWidth+'px'}" class="swiper" :current="item.imgIndex" :indicator-dots="false" :autoplay="false" :interval="0"
@@ -136,6 +137,8 @@
         imgKey:0,
         overturnType:0,
         animationData:{},
+        animationIndex:0,
+        animationItem:{},
         ifLongTap: false,
       }
 		},
@@ -162,7 +165,6 @@
     },
 		methods: {
       setBox(index,type){
-        console.log('index:'+index+'type:'+type)
         if(  this.list[index]){
           if(type===1){
             this.list[index].boxWidth=this.winWidth-18
@@ -179,6 +181,8 @@
       setData(list){
         list.forEach((item)=>{
           item.imgIndex=0
+          item.moveX=0
+          item.angleNum=0
           item.animation={}
           if( this.list.length<=0){
             item.boxWidth=this.winWidth-18
@@ -192,6 +196,7 @@
         })
       },
       setImgKey(item, type){
+        console.log('type:'+type)
         if( this.overturnType<=0){
           let imgNum=item.images.length-1
           if(type===0){
@@ -273,47 +278,58 @@
       endScroll(){
         console.log('滚动结束')
       },
-      longPress(e, index){
-        this.ifLongTap=true
-        tools.vibrate()
-        this.touchStart(e, index)
-      },
+
 			touchStart(e, index) {
-        this.ifLongTap=true
 				if (this.slideing) return;
 				if (typeof this.list[index].x === 'undefined' && typeof this.list[index].y === 'undefined') {
 					this.$set(this.list[index], 'y', 0)
 					this.$set(this.list[index], 'x', 0)
+					this.$set(this.list[index], 'moveX', 0)
+					this.$set(this.list[index], 'angleNum', 0)
 				}
 				this.swipering = true;
 				this.x.start = e.touches[0].pageX;
 				this.y.start = e.touches[0].pageY;
 			},
 			touchMove(e, index) {
-        if(!this.ifLongTap){
-          return;
-        }
+
 				if (this.slideing) return
 				// 滑动状态/最后一个就不滑动
-				if (this.list.length == index + 1) {
+				if (this.list.length === index + 1) {
 					return;
 				}
         this.x.move = e.touches[0].pageX;
         this.y.move = e.touches[0].pageY;
         // console.log('this.x.start:'+this.x.start+'this.x.move:'+this.x.move)
         // console.log('this.y.start:'+this.y.start+'this.y.move:'+this.y.move)
+        this.list[index].x = this.x.move - this.x.start
+        this.list[index].y = this.y.move - this.y.start
+        let moveX= Math.abs(this.list[index].x)
+        if(moveX>10){
+          this.ifLongTap=true
+          this.setBox(this.currentIndex,2)
+          let angleNum= this.getAngleNum(moveX)
+          if (Number.parseInt(this.list[index].x) > 0) {
+            this.love = Number.parseInt(this.list[index].x) / (100 * 2)
+            this.list[index].moveX=this.list[index].x - 10
+            this.list[index].angleNum=angleNum*-1
+          } else {
+            this.dislike = Math.abs(Number.parseInt(this.list[index].x) / (100 * 2))
+            this.list[index].moveX=this.list[index].x+10
+            this.list[index].angleNum=angleNum
+          }
+        }
 
 
-
-				this.list[index].x = this.x.move - this.x.start
-				this.list[index].y = this.y.move - this.y.start
-        this.setBox(this.currentIndex,2)
-				if (Number.parseInt(this.list[index].x) > 0) {
-					this.love = Number.parseInt(this.list[index].x) / (100 * 2)
-				} else {
-					this.dislike = Math.abs(Number.parseInt(this.list[index].x) / (100 * 2))
-				}
 			},
+      getAngleNum(moveX){
+        moveX-=10
+        let angleNum=(30*(moveX/this.winWidth*3)).toFixed(2)
+        if(angleNum>30){
+          angleNum=30
+        }
+        return (angleNum*1).toFixed(6);
+      },
 			touchEnd(index) {
         if(this.ifLongTap){
           this.ifLongTap=false
@@ -336,6 +352,8 @@
 				} else {
 					this.list[index].x = 0;
 					this.list[index].y = 0;
+					this.list[index].moveX = 0;
+					this.list[index].angleNum = 0;
 					this.slideing = false;
 					this.love = 0;
 					this.dislike = 0;
@@ -346,6 +364,8 @@
 				this.slideing = true;
 				this.list[index].x = this.list[index].x * 5;
 				this.list[index].y = this.list[index].y * 5;
+        this.list[index].moveX *= 5;
+        this.list[index].angleNum *= 5;
 				this.touchEndDone()
 			},
 			touchEndDone() {
@@ -421,7 +441,7 @@
 		border-radius: 20rpx;
 		position: absolute;
 		opacity: 0;
-		transform: translate3d(0px, 0px, 0px) rotate(0deg);
+		transform: rotate(0) translateX(0);
 		transition: 300ms;
 		color: #fff;
 

pages/index/index.vue

@@ -36,6 +36,11 @@ export default {
 
 <style scoped lang="scss">
 .index-box{
+  overflow: hidden;
+  -webkit-overflow-scrolling: touch;
+  overscroll-behavior: none;
+  height: calc(100vh - 50px - env(safe-area-inset-bottom));
+  width: 100vw;
   .box-one{
 
   }