短视频平台搭建，淡入淡出支持左滑右滑轮播图

<template><br>  <view><br>    <view @touchstart="touchStart" @touchend="touchEnd"><br>      <image v-for="(value,index) in swiperList" :key="index" :src="value.imagePath" :animation="num==index?showpic:hidepic"/><br>      <view><br>        <view v-for="(item,ind) in swiperList" :key="ind" :class="num==ind?'activeItem':''"></view><br>      </view><br>    </view><br>  </view><br></template><br><script><br> <br>export default {<br>  name: 'grapSwiper',<br>  data () {<br>    return {<br>      touchStartX: 0,  // 触屏起始点x  <br>      touchStartY: 0,  // 触屏起始点y  <br>      swiperList:[<br>        {<br>          imagePath:'https://pla.o-banks.cn/attach/mgrImg/20220110/1641806731686.png'<br>        },<br>        {<br>         imagePath:'https://pla.o-banks.cn/attach/mgrImg/20210923/1632361307137.png'<br>        },<br>        {<br>          imagePath:'https://pla.o-banks.cn/attach/mgrImg/20210916/1631775560384.png'<br>        }<br>      ],<br>      setTime:null,<br>      num:0,<br>      timeCount:5000,<br>      showpic:null,<br>      hidepic:null<br>    }<br>  },<br>  created () {<br>  },<br>  mounted(){<br>    this.initSwiper();<br>  },<br>  methods:{<br>    initSwiper(){<br>      const animation = uni.createAnimation({}) //创建一个动画实例<br>      this.setTime = setInterval(() => {<br>        this.num++<br>        if(this.num >this.swiperList.length-1){<br>          this.num = 0<br>        }<br>        //淡入<br>        animation.opacity(1).step({duration:300}) //描述动画<br>        this.showpic = animation.export()<br>        //淡出<br>        animation.opacity(0).step({duration:300})<br>        this.hidepic=animation.export()<br> <br>      }, this.timeCount);<br>    },<br>    touchStart(e) {  <br>      this.touchStartX = e.touches[0].clientX;  <br>      this.touchStartY = e.touches[0].clientY;  <br>    },  <br>    touchEnd(e) {  <br>      let deltaX = e.changedTouches[0].clientX - this.touchStartX;  <br>      let deltaY = e.changedTouches[0].clientY - this.touchStartY;  <br>      if (Math.abs(deltaX) > 50 && Math.abs(deltaX) > Math.abs(deltaY)) {  <br>        // 左滑右滑时重新初始化定时器<br>        clearInterval(this.setTime)<br>        this.initSwiper();<br> <br>        if (deltaX >= 0) {  <br>          this.num--<br>          if(this.num <0){<br>            this.num = this.swiperList.length-1<br>          }<br>        } else {  <br>          this.num++<br>          if(this.num >this.swiperList.length-1){<br>            this.num = 0<br>          }<br>        }  <br>      } else {  <br>        console.log("可能是误触！")  <br>      }  <br>    }, <br>  },<br>  destroyed(){<br>    clearInterval(this.setTime)<br>  }<br>}<br></script><br> <br><style scoped><br>  .grapSwiper{<br>    .banner{<br>      width: 750rpx;<br>      height: 640rpx;<br>      position: relative;<br>      .pic{<br>        width: 750rpx;<br>        height: 640rpx;<br>        position: absolute;<br>      }<br>      .snipper{<br>        position: absolute;<br>        width: 100%;<br>        height: 2rpx;<br>        top: 210rpx;<br>        left: 0;<br>        display: flex;<br>        align-items: center;<br>        justify-content: center;<br>        .sniItem{<br>          width: 15rpx;<br>          height: 2rpx;<br>          background: #FFFFFF;<br>          opacity: 0.4;<br>          border-radius: 5rpx;<br>          margin-right: 6rpx;<br>        }<br>        .activeItem{<br>          width: 25rpx;<br>          background: #FFFFFF;<br>          opacity: 1;<br>        }<br>      }<br>    }<br>  }<br></style>