uniapp实现淡入淡出的轮播

有个需求让我在实现一个淡入淡出的轮播，可以左右滑动切换不同的图片，可是老天，我用的是uniapp！他不支持啊，微信小程序也是不支持的，然后我参考了一个回答，改了改实现了这个功能。技术一般，多多指教。下方小程序实现的链接。
[https://developers.weixin.qq.com/community/develop/doc/406acbc5431d69f8bf533d5e8796200f]
话不多说，上代码，css部分就不写了。

<template>
	<view>
		<view @touchstart="touchstart" @touchend="touchend" @tap="bgImgTap(num)">
			<image style="z-index: 3;" :src="bgSrc"  mode="aspectFill" :animation="num==0?showpic:hidepic"></image>
			<image style="z-index: 2;" :src="bgSrc1" 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 picnum" :key="index"></view>
		</view>
	</view>
</template>
/////////------------------轮播动画开始
//页面加载后，修改picshow的值，避免图片覆盖。
//在onLoad中调用animationtest方法，自动轮播。
		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{
				//点击不同的图片，对应不同的需求
			}
		},