vue phone touch screen sliding

Posted May 27, 20201 min read

Function:iview Carousel, I need to realize the sliding switch function on the phone.

<div class = "phone" @ touchstart = "phone_mouseS" @ touchend = "phone_mouseE">
<Carousel:autoplay-speed = "5000" v-model = "phone_mouseMIndex" autoplay:value = "0" loop v-if = "menuChoose == '/'">
  <CarouselItem>
    <img class = "img" src = "../../static/common/phone_banner_index1.jpg" />
  </CarouselItem>
  <CarouselItem>
    <img class = "img" src = "../../static/common/phone_banner_index1.jpg" />
  </CarouselItem>
  <CarouselItem>
    <img class = "img" src = "../../static/common/phone_banner_index3.jpg" />
  </CarouselItem>
</Carousel>
</div>

data() {
return {
  phone_mouseMIndex:0, //Phone-side sliding index
  phone_mouseMX0:0, //Phone-side sliding index
  phone_mouseMX1:0, //Phone side sliding index
}
},
...
//The phone side starts sliding
phone_mouseS(e) {
  this.phone_mouseMX0 = e.changedTouches [0].pageX;
},
//end of the phone
phone_mouseE(e) {
  this.phone_mouseMX1 = e.changedTouches [0].pageX;
  let tag = this.phone_mouseMX1-this.phone_mouseMX0;
  if(tag> = 50) {
    if(this.phone_mouseMIndex> 0) {
      this.phone_mouseMIndex--;
    } else {
      this.phone_mouseMIndex = 2;
    }
  }
  if(tag <= -50) {
    if(this.phone_mouseMIndex <2) {
      this.phone_mouseMIndex ++;
    } else {
      this.phone_mouseMIndex = 0;
    }
  }
},