最近想仿一下美团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就这样实现了，是不是很简单～
