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