92 lines
2.6 KiB
Vue
92 lines
2.6 KiB
Vue
|
<template>
|
||
|
|
<view>
|
||
|
|
<view @touchstart="touchstart" @touchend="touchend" @tap="bgImgTap(num)">
|
||
|
|
<image style="z-index: 3;" src="/static/del/500478055.png" mode="aspectFill" :animation="num==0?showpic:hidepic"></image>
|
||
|
|
<image style="z-index: 2;" src="/static/del/img001.png" v-if="picshow" mode="aspectFill" :animation="num==1?showpic:hidepic"></image>
|
||
|
|
</view>
|
||
|
|
<view class="switchit pf">
|
||
|
|
<view class="switchspot" :style="num== index?'opacity:0.8':'opacity:0.2'" v-for="(item,index) in 2" :key="index"></view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
num:0,
|
||
|
|
picnum:[],
|
||
|
|
picshow:true,
|
||
|
|
hidepic:false,
|
||
|
|
showpic:'showpic'
|
||
|
|
}
|
||
|
|
|
||
|
|
},
|
||
|
|
onLoad() {
|
||
|
|
this.animationtest();
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
animationtest(){ //页面加载后的自动轮播
|
||
|
|
var num=this.num;
|
||
|
|
this.changePic(num);
|
||
|
|
},
|
||
|
|
changePic(num){//轮播主方法
|
||
|
|
clearInterval(this.setInter1);//先将已有的计时器清除
|
||
|
|
var animation= uni.createAnimation({
|
||
|
|
timingFunction: 'ease',
|
||
|
|
}) //创建一个动画实例
|
||
|
|
this.animation = animation
|
||
|
|
this.setInter1=setInterval(function(){//循环
|
||
|
|
this.num=num;
|
||
|
|
num++;
|
||
|
|
if(num>this.picmaxnum){
|
||
|
|
num=0;
|
||
|
|
}
|
||
|
|
//淡入
|
||
|
|
animation.opacity(1).step({duration:1500}) //描述动画
|
||
|
|
this.showpic=animation.export() //输出动画
|
||
|
|
//淡出
|
||
|
|
animation.opacity(0).step({duration:1500})
|
||
|
|
this.hidepic=animation.export()
|
||
|
|
}.bind(this),4000)
|
||
|
|
},
|
||
|
|
touchstart(e){//滑动开始的位置，记录位置的坐标。
|
||
|
|
this.startData.clientX=e.changedTouches[0].clientX;
|
||
|
|
this.startData.clientY=e.changedTouches[0].clientY;
|
||
|
|
},
|
||
|
|
touchend(e){//滑动结束的点，记录坐标，减去起点位置
|
||
|
|
const subX=e.changedTouches[0].clientX-this.startData.clientX;
|
||
|
|
const subY=e.changedTouches[0].clientY - this.startData.clientY;
|
||
|
|
if(subY>50 || subY<-50){// console.log('上下滑')
|
||
|
|
}else{
|
||
|
|
if(subX>100){//右滑，显示前一张，当前的页面减一。如果当前页面是第一张，显示最后一张。
|
||
|
|
if(this.num==0)
|
||
|
|
this.num=this.picmaxnum;
|
||
|
|
else
|
||
|
|
this.num--;
|
||
|
|
this.changePic(this.num);
|
||
|
|
}else if(subX<-100){//左滑，显示下一张，当前的页面加一。如果当前页面是最后一张，显示第一张。
|
||
|
|
if(this.num==this.picmaxnum)
|
||
|
|
this.num=0;
|
||
|
|
else
|
||
|
|
this.num++;
|
||
|
|
this.changePic(this.num);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
bgImgTap(num){
|
||
|
|
if(num==0){
|
||
|
|
uni.switchTab({
|
||
|
|
url:'../a'
|
||
|
|
})
|
||
|
|
}else{
|
||
|
|
//点击不同的图片，对应不同的需求
|
||
|
|
}
|
||
|
|
},
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style>
|
||
|
|
|
||
|
|
</style>
|