用vue 實(shí)現(xiàn)手機(jī)觸屏滑動(dòng)功能
更新時(shí)間：2020年05月28日 10:27:46 作者：悠讓
這篇文章主要介紹了用vue 實(shí)現(xiàn)手機(jī)觸屏滑動(dòng)的功能，文中通過示例代碼給大家介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
功能：iview Carousel 走馬燈，我需要在phone上實(shí)現(xiàn)滑動(dòng)切換功能。
<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端 滑動(dòng)索引
phone_mouseMX0: 0, // phone端 滑動(dòng)索引
phone_mouseMX1: 0, // phone端 滑動(dòng)索引
}
},
...
// phone端 滑動(dòng)開始
phone_mouseS(e){
this.phone_mouseMX0 = e.changedTouches[0].pageX;
},
// phone端 滑動(dòng)結(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ī)觸屏滑動(dòng)功能的文章就介紹到這了,更多相關(guān)vue 手機(jī)觸屏滑動(dòng)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue setInterval 定時(shí)器失效的解決方式
這篇文章主要介紹了vue setInterval 定時(shí)器失效的解決方式，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
Pinia是Vue 3的專屬狀態(tài)管理庫,旨在替代Vuex,提供更簡單、直觀的狀態(tài)管理解決方案,它支持組合式API和選項(xiàng)式API,允許跨組件或頁面共享狀態(tài),避免了Vuex中的許多復(fù)雜概念,本文介紹Vue中Pinia的各種詳細(xì)說明和使用示例,感興趣的朋友一起看看吧2025-01-01
組件間通信簡單來說就是組件間進(jìn)行數(shù)據(jù)傳遞。就像我們?nèi)粘５拇螂娫挘褪峭ㄓ嵉囊环N方式，你把話說給我聽，我把話說給你聽，說的話就是數(shù)據(jù)。電話就是通訊方式的一種。無論是 Vue 還是 React ，都得進(jìn)行組件間通信。2021-05-05
vue3使用Pinia的store的組件化開發(fā)模式詳解
這篇文章主要介紹了vue3使用Pinia的store的組件化開發(fā)模式,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2025-04-04
Vite 是一個(gè)面向現(xiàn)代瀏覽器的更輕,更快的web應(yīng)用開發(fā)工具,下面這篇文章主要給大家介紹了關(guān)于如何使用vite搭建vue3項(xiàng)目的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-07-07
Vue/React子組件實(shí)例暴露方法(TypeScript)
最近幾個(gè)月都在用TS開發(fā)各種項(xiàng)目，框架有涉及到Vue3,React18等，記錄一下Vue/React組件暴露出變量/函數(shù)的方法的寫法，對vue?react組件暴露方法相關(guān)知識感興趣的朋友跟隨小編一起看看吧2022-11-11
這篇文章主要為大家詳細(xì)介紹了在vue2中如何處理xml格式的數(shù)據(jù),文中的示例代碼講解詳細(xì),具有一定的借鑒價(jià)值,有需要的小伙伴可以參考一下2024-03-03
基礎(chǔ)的前端vite項(xiàng)目創(chuàng)建過程詳解
這篇文章主要介紹了如何使用Vite創(chuàng)建一個(gè)前端項(xiàng)目,并配置了Vue?Router、Vuex、Element?Plus、Axios和Element?Plus圖標(biāo)等第三方依賴,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-11-11
parcel-vue 一個(gè)基于Parcel打包工具的 VueJS急速開發(fā)腳手架解決方案,強(qiáng)烈建議使用node8.0以上。下面通過本文給大家介紹全新打包工具parcel零配置vue開發(fā)腳手架的相關(guān)知識，感興趣的朋友一起看看吧2018-01-01
今天將從 Vue 的入口文件開始，看看聲明了一個(gè) Vue 的單文件之后是如何被 compile-core 編譯核心模塊編譯成渲染函數(shù)的。下面小編講解并附上代碼分析展現(xiàn)在文章里，感興趣的小伙伴不要錯(cuò)過奧2021-09-09