vue轮播图

不能左右滑动
<div class="banner">
  <div class="item">
    <img :src="dataList[currentIndex]">
  </div>
  <div class="page" v-if="this.dataList.length > 1">
    <ul>
      <li @click="gotoPage(prevIndex)">&lt;</li>
      <li v-for="(item,index) in dataList" @click="gotoPage(index)" :class="{'current':currentIndex == index}">  {{index+1}}</li>
      <li @click="gotoPage(nextIndex)">&gt;</li>
    </ul>
  </div>
</div>

---

methods: {
  gotoPage(index) {
    this.currentIndex = index;
  }
}

created: {
  this.runInv()
}

computed: {
  //上一张
  prevIndex() {
    if(this.currentIndex == 0) {
      return this.dataList.length - 1;
    }else{
      return this.currentIndex - 1;
    }
  },
  //下一张
  nextIndex() {
    if(this.currentIndex == this.dataList.length - 1) {
      return 0;
    }else {
      return this.currentIndex + 1;
    }
  }
}

---

可以左右滑动

<div id="slider" class="slider">
　　<img v-for="(src,index) in list2" :key="index" :src="src"
　　　　@touchstart="touchstart"
　　　　@touchmove="touchmove"/>
</div>

return {
　　list2: [],

　　startPointX: 0,

　　changePointX: 0,

　　showIndex: 0,

}

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.list2.length-1){
　　　　　　this.show(++this.showIndex)
　　　　}else if(leftSlide<-30&&this.showIndex>0){
　　　　　　this.show(--this.showIndex)
　　　　}
　　},

}

 

.slider{
　　overflow: hidden;
　　white-space: nowrap;
　　transition: 1s;
　　padding: 0 calc(50vw - 160px);
}
.slider > img {
　　width: 320px;
　　display: inline;
　　margin-right: 10px;
}