最近想仿一下美團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。圖片切換後使用changePointX記錄一下切換時的x值，避免重複觸發，每次觸碰的x值應該很難相同，畢竟有好幾位小數。

圖片的切換我是通過改變margin-left實現的，程式碼裡的330px是一個圖片的寬度+圖片直接的間距。具體業務裡應該也是確定的，所以我就寫死了。

So就這樣實現了，是不是很簡單～

如果有幫助的話，github地址求個star～感激不盡