vue移动端滑动切换图片的一个简单思路

最近想仿一下美团app里的榛果民宿，当做移动端的练习。github地址在这里，还没做完。

按照app里的图片切换效果想了一个简单的实现思路，在这个基础上做更复杂一点更炫酷一点的轮播应该也是可以的。效果如图。

代码其实很简单，

<div id="slider" class="slider">
      <img v-for="(src,index) in imgSrc" :key="index" :src="src" 
      @touchstart="touchstart"
      @touchmove="touchmove"/>
</div>
data () {
    return {
      imgSrc:[
        '../static/slider1.jpeg',
        '../static/slider2.jpeg',
        '../static/slider3.jpeg',
        '../static/slider4.jpeg',
        '../static/slider5.jpeg',
      ],
      startPointX: 0,
      changePointX: 0,
      showIndex: 0,
    }
  },

v-for循环img标签，在每个img上监听touchstart和touchmove事件。

methods:{
    show(index){
      this.changePointX=this.startPointX;
      let slider = document.getElementById('slider');
      slider.style.marginLeft=`-${330*index}px`;
    },
    touchstart(e){
      this.startPointX = e.changedTouches[0].pageX;
    },
    touchmove(e){
      if(this.startPointX==this.changePointX){
        return ;
      }
      let currPointX = e.changedTouches[0].pageX;
      let leftSlide = this.startPointX-currPointX;
      if(leftSlide>30&&this.showIndex<this.imgSrc.length-1){
        this.show(++this.showIndex)
      }else if(leftSlide<-30&&this.showIndex>0){
        this.show(--this.showIndex)
      }
    },
  }

检测到touchstart事件后，使用startPointX记录一下touch时候的pageX值。

在滑动时touchmove事件是一直触发的。

当手指滑动的位置和touchstart时位置在x轴上的距离大于一个值时触发图片切换，我这里设置的是30px。

图片的切换我是通过改变margin-left实现的，代码里的330px是一个图片的宽度+图片直接的间距。具体业务里应该也是确定的，所以我就写死了。

So就这样实现了，是不是很简单～