用vue 實(shí)現(xiàn)手機(jī)觸屏滑動功能
功能: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)文章
vue Draggable實(shí)現(xiàn)拖動改變順序
這篇文章主要為大家詳細(xì)介紹了vue Draggable實(shí)現(xiàn)拖動改變順序,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下2022-04-04vue常用指令實(shí)現(xiàn)學(xué)生錄入系統(tǒng)的實(shí)戰(zhàn)
本文主要介紹了vue常用指令實(shí)現(xiàn)學(xué)生錄入系統(tǒng)的實(shí)戰(zhàn),文中通過示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下2022-02-02vue elementui 動態(tài)追加下拉框、輸入框功能
這篇文章主要介紹了vue elementui 動態(tài)追加下拉框、輸入框功能,本文通過示例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧2024-04-04vue實(shí)現(xiàn)同時設(shè)置多個倒計時
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)同時設(shè)置多個倒計時,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下2021-05-05基于vue-cli3+typescript的tsx開發(fā)模板搭建過程分享
這篇文章主要介紹了搭建基于vue-cli3+typescript的tsx開發(fā)模板,本文通過實(shí)例代碼截圖的形式給大家介紹的非常詳細(xì),具有一定的參考借鑒價值,需要的朋友可以參考下2020-02-02