功能：iview Carousel 走馬燈，我需要在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端 滑動索引
 phone_mouseMX0: 0,// phone端 滑動索引
 phone_mouseMX1: 0,// phone端 滑動索引
}
},...
// phone端 滑動開始
phone_mouseS(e){
 this.phone_mouseMX0 = e.changedTouches[0].pageX;
},// 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;
 }
 }
}
 

到此這篇關於用vue 實現手機觸屏滑動功能的文章就介紹到這了,更多相關vue 手機觸屏滑動內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！