swiper轮播兼容视频小记

swiper轮播兼容视频

思路

1. 首先处理数据，将图片和视频区分，type类型分为img和video；

    newJson.unshift({
       newJson.push({
         url: el.split('?')[0],
         type: 'img',
         thumbs: el,
       });
       // 视频放在第一位
       newJson.unshift({
         url: baseInfo.video_info[0].path,
         type: 'video',
         thumbs: baseInfo.video_info[0].thumbs,
       });
     });
   

2. 初始化swiper；

   let swiperTop = new Swiper('.swiperTop', {
     spaceBetween: 0,
     thumbs: {
       swiper: swiperBottom,
       autoScrollOffset: 1,
     },
   });
   

3. 增加遮罩，在type类型是video的时候，展示出来；

   <div
       v-if="item.type === 'video'"
       class="mask"
       @touchstart="starPos"
       @touchmove="endPos"
   ></div>
   

4. 有小伙伴就会问了，增加了个遮罩，那你的那些播放控件怎么办？有两种方法，一个是手写控件，还有一种，调整控件与透明遮罩的层级，剩下的就是在遮罩上进行的操作；
5. 通过touchstart和touchmove，判断你在遮罩上进行了哪些操作；

   // 记录了你点下去X轴的位置
     const touchstart = (e) => {
       baseInfo.lastPosition = e.changedTouches[0].clientX;
     };
   

   // 记录了你在遮罩上横向挪动
     const touchmove = (e) => {
       baseInfo.nextPosition = e.changedTouches[0].clientX;
       // 如果开始的大于结束的代表的是往左滑动,否则是往右滑动
       if (baseInfo.lastPosition > baseInfo.nextPosition) {
         baseInfo.swiperTop.slideTo(1);
       }
     };