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

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

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

功能:iview Carousel 走馬燈,我需要在phone上實現(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端 滑動結束
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 實現(xiàn)手機觸屏滑動功能的文章就介紹到這了,更多相關vue 手機觸屏滑動內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!

相關文章

  • Vue2.0 實現(xiàn)單選互斥的方法

    Vue2.0 實現(xiàn)單選互斥的方法

    本篇文章主要介紹了Vue2.0 實現(xiàn)單選互斥的方法,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-04-04
  • vue Draggable實現(xiàn)拖動改變順序

    vue Draggable實現(xiàn)拖動改變順序

    這篇文章主要為大家詳細介紹了vue Draggable實現(xiàn)拖動改變順序,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2022-04-04
  • vue常用指令實現(xiàn)學生錄入系統(tǒng)的實戰(zhàn)

    vue常用指令實現(xiàn)學生錄入系統(tǒng)的實戰(zhàn)

    本文主要介紹了vue常用指令實現(xiàn)學生錄入系統(tǒng)的實戰(zhàn),文中通過示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2022-02-02
  • vue elementui 動態(tài)追加下拉框、輸入框功能

    vue elementui 動態(tài)追加下拉框、輸入框功能

    這篇文章主要介紹了vue elementui 動態(tài)追加下拉框、輸入框功能,本文通過示例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友參考下吧
    2024-04-04
  • vue axios整合使用全攻略

    vue axios整合使用全攻略

    這篇文章主要介紹了vue axios整合使用全攻略,需要的朋友可以參考下
    2018-05-05
  • vue實現(xiàn)同時設置多個倒計時

    vue實現(xiàn)同時設置多個倒計時

    這篇文章主要為大家詳細介紹了vue實現(xiàn)同時設置多個倒計時,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2021-05-05
  • vue3封裝輪播圖組件的方法

    vue3封裝輪播圖組件的方法

    這篇文章主要為大家詳細介紹了vue3封裝輪播圖組件的方法,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2021-09-09
  • 基于vue-cli3+typescript的tsx開發(fā)模板搭建過程分享

    基于vue-cli3+typescript的tsx開發(fā)模板搭建過程分享

    這篇文章主要介紹了搭建基于vue-cli3+typescript的tsx開發(fā)模板,本文通過實例代碼截圖的形式給大家介紹的非常詳細,具有一定的參考借鑒價值,需要的朋友可以參考下
    2020-02-02
  • Vue組件通信方式(父傳子、子傳父、兄弟通信)

    Vue組件通信方式(父傳子、子傳父、兄弟通信)

    這篇文章主要介紹了Vue組件通信方式(父傳子、子傳父、兄弟通信),具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-05-05
  • Vue項目配置在局域網(wǎng)下訪問方式

    Vue項目配置在局域網(wǎng)下訪問方式

    這篇文章主要介紹了Vue項目配置在局域網(wǎng)下訪問方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2023-04-04

最新評論