欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

用vue 實(shí)現(xiàn)手機(jī)觸屏滑動功能

 更新時間:2020年05月28日 10:27:46   作者:悠讓  
這篇文章主要介紹了用vue 實(shí)現(xiàn)手機(jī)觸屏滑動的功能,文中通過示例代碼給大家介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下

功能:iview Carousel 走馬燈,我需要在phone上實(shí)現(xiàn)滑動切換功能。

<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端 滑動結(jié)束
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;
 }
 }
}

到此這篇關(guān)于用vue 實(shí)現(xiàn)手機(jī)觸屏滑動功能的文章就介紹到這了,更多相關(guān)vue 手機(jī)觸屏滑動內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

最新評論