|
|
@@ -24,7 +24,7 @@
|
|
|
<!-- -->
|
|
|
<!-- 加载图片会闪屏 双if避免 -->
|
|
|
<template v-if="currentIndex + visible >= index && currentIndex <= index">
|
|
|
- <view class="tantan-slide-img-box" :class="{'animate__shakeX':true}" :style="{height: winHeight + 'px'}">
|
|
|
+ <view class="tantan-slide-img-box" :animation="animationData" :style="{height: winHeight + 'px'}">
|
|
|
<scroll-view :enhanced="true" :bounces="false" :show-scrollbar="false" refresher-default-style="none" class="tantan-slide-img-scroll-box" @scroll="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"
|
|
|
@@ -134,7 +134,7 @@
|
|
|
dislike: 0,
|
|
|
imgKey:0,
|
|
|
overturnType:0,
|
|
|
- animationData:{},
|
|
|
+ animationData:null,
|
|
|
ifLongTap: false,
|
|
|
isSlide:false,
|
|
|
slideServe:false,
|
|
|
@@ -191,6 +191,10 @@
|
|
|
})
|
|
|
},
|
|
|
setImgKey(item, type){
|
|
|
+ if(this.animationData){
|
|
|
+ return false
|
|
|
+ }
|
|
|
+
|
|
|
// this.touchEndNext(this.currentIndex)
|
|
|
// return;
|
|
|
console.log('type:'+type)
|
|
|
@@ -198,67 +202,56 @@
|
|
|
let imgNum=item.images.length-1
|
|
|
if(type===0){
|
|
|
if(item.imgIndex<=0){
|
|
|
- // this.setOverturnTwo()
|
|
|
+ this.setOverturnTwo()
|
|
|
}else {
|
|
|
--item.imgIndex
|
|
|
- // this.setOverturnImg(item)
|
|
|
+ this.setOverturnImg(item)
|
|
|
}
|
|
|
}else {
|
|
|
if(item.imgIndex>=imgNum){
|
|
|
- // this.setOverturnTwo()
|
|
|
+ this.setOverturnTwo()
|
|
|
}else {
|
|
|
++item.imgIndex
|
|
|
- // this.setOverturnImg(item)
|
|
|
+ this.setOverturnImg(item)
|
|
|
}
|
|
|
}
|
|
|
+ setTimeout(()=>{
|
|
|
+ this.animationData=null
|
|
|
+ },101)
|
|
|
console.log('item.imgIndex:'+item.imgIndex)
|
|
|
}
|
|
|
},
|
|
|
setOverturnImg(item){
|
|
|
+ tools.vibrate()
|
|
|
+ return true;
|
|
|
let animation = uni.createAnimation({
|
|
|
- duration: 80,
|
|
|
+ duration: 100,
|
|
|
timingFunction: 'ease',
|
|
|
})
|
|
|
animation.rotateY(3).scale(1.01).step()
|
|
|
item.image=item.images[this.imgKey]
|
|
|
+ animation.rotateY(-3).scale(0.99).step()
|
|
|
+ animation.rotateY(0).scale(1).step()
|
|
|
tools.vibrate()
|
|
|
this.animationData = animation.export()
|
|
|
- setTimeout(function() {
|
|
|
- animation.rotateY(-3).scale(0.99).step()
|
|
|
- this.animationData = animation.export()
|
|
|
- setTimeout(function() {
|
|
|
- animation.rotateY(0).scale(1).step()
|
|
|
- this.animationData = animation.export()
|
|
|
- }.bind(this), 80)
|
|
|
- }.bind(this), 80)
|
|
|
+
|
|
|
|
|
|
},
|
|
|
setOverturnTwo(){
|
|
|
// tools.error('two')
|
|
|
// return;
|
|
|
+ tools.vibrate()
|
|
|
let animation = uni.createAnimation({
|
|
|
- duration: 80,
|
|
|
+ duration: 100,
|
|
|
timingFunction: 'ease',
|
|
|
})
|
|
|
animation.rotateY(3).step()
|
|
|
- tools.vibrate()
|
|
|
- let overturnNum=1
|
|
|
- let overturnServe=setInterval(()=>{
|
|
|
- ++overturnNum
|
|
|
- // console.log('overturnNum:'+overturnNum)
|
|
|
- if(overturnNum>4){
|
|
|
- clearInterval(overturnServe)
|
|
|
- }else {
|
|
|
- let overturnType=(overturnNum%2===1)?1:2
|
|
|
- if(overturnType===1){
|
|
|
- animation.rotateY(-3).step()
|
|
|
- tools.vibrate()
|
|
|
- }else {
|
|
|
- animation.rotateY(0).step()
|
|
|
- }
|
|
|
- this.animationData = animation.export()
|
|
|
- }
|
|
|
- },80)
|
|
|
+ animation.rotateY(-3).step()
|
|
|
+ animation.rotateY(3).step()
|
|
|
+ animation.rotateY(-3).step()
|
|
|
+ animation.rotateY(0).step()
|
|
|
+ this.animationData = animation.export()
|
|
|
+
|
|
|
|
|
|
},
|
|
|
cardTransform(item, index) {
|