uniapp項目實踐自定義滑動觸摸組件實現(xiàn)示例
更新時間：2023年09月06日 08:37:45 作者：MarkGuan
這篇文章主要介紹了uniapp項目實踐自定義滑動觸摸組件實現(xiàn)示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
準備工作
在 APP 的日常開放過程中，我們經(jīng)?？梢钥吹缴侠⑿隆⑾吕⑿?、左滑、右滑、觸底加載等效果，那其中的原理是如何呢，又是如何實現(xiàn)的呢，下面就一探究竟。這篇文章主要是講述自定義滑動觸摸組件的方放，兼容網(wǎng)頁 H5 端、微信小程序端和 App 端。
- 在
components新建一個q-swiper文件夾，并新建一個q-swiper.vue的組件； - 按照前一篇所說的頁面結(jié)構(gòu)，編寫好預(yù)定的滑動觸摸頁面；
原理分析
自定義滑動觸摸組件就是采用普通的方法進行判斷滑動上下左右的距離，從而實現(xiàn)滑動效果。
主要使用到的事件有ontouchstart、ontouchend、onmousedown和onmouseup。
根據(jù)pageX、pageY、clientX和clientY來判斷滑動方向從而實現(xiàn)滑動功能。
組件實現(xiàn)
準備工作和原理分析完成后，接下來寫一個簡單的自定義滑動模塊組件。
模板部分
<view
class="q-swiper"
@touchstart="handlerStart"
@touchend="handlerEnd"
@mousedown="handlerStart"
@mouseup="handlerEnd">
<slot name="content">
<!-- 插槽自定義內(nèi)容 -->
</slot>
</view>樣式部分
.q-swiper {
width: 100%;
height: 100%;
}腳本部分
- 引入依賴包和屬性設(shè)置
import { reactive } from "vue";
// 滑動信息
const touchInfo = reactive({
touchX: "",
touchY: "",
});
// 滑動類型
const touchTypes = reactive({
left: {
id: 1,
name: "左滑",
val: "left",
},
right: {
id: 2,
name: "右滑",
val: "right",
},
up: {
id: 3,
name: "上滑",
val: "up",
},
down: {
id: 4,
name: "下滑",
val: "down",
},
});
// 發(fā)送事件
const emits = defineEmits(["change"]);- 滑動方法定義
// 滑動開始
function handlerStart(e) {
let { clientX, clientY } = e.changedTouches[0];
touchInfo.touchX = clientX;
touchInfo.touchY = clientY;
}
// 滑動結(jié)束
function handlerEnd(e) {
let { clientX, clientY } = e.changedTouches[0];
let diffX = clientX - touchInfo.touchX,
diffY = clientY - touchInfo.touchY,
absDiffX = Math.abs(diffX),
absDiffY = Math.abs(diffY),
type = "";
if (absDiffX > 50 && absDiffX > absDiffY) {
type = diffX >= 0 ? "right" : "left";
}
if (absDiffY > 50 && absDiffX < absDiffY) {
type = diffY < 0 ? "up" : "down";
}
if (type) {
console.log("滑動信息：", touchTypes[type]);
emits("change", touchTypes[type]);
}
}實戰(zhàn)演練
寫好滑動組件后，可以在 H5 、小程序和 App 里面使用了，下面是頁面模板和腳本使用方法。
模板使用
<q-swiper @change="changeSwiper">
<template v-slot:content>
<view class="swiper-box"> 滑動方向：{{ swiperDir.name }} </view>
<view
:class="{'swiper-section': true, [swiperDir.val != 'click' ? swiperDir.val : '']: true}"></view>
</template>
</q-swiper>樣式編寫
.swiper-box {
padding: 30rpx;
font-size: 24rpx;
}
.swiper-section {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #f99;
opacity: 0.8;
transition: all 0.5s;
&.up {
transform: translateX(0) translateY(-100%);
}
&.down {
transform: translateX(0) translateY(0);
}
&.left {
transform: translateX(0) translateY(0);
}
&.right {
transform: translateX(100%) translateY(0);
}
}腳本使用
鼠標或手指上下左右滑動頁面，調(diào)用下面方法進行滑動。
- 定義數(shù)據(jù)
// 導(dǎo)入依賴
import { reactive } from "vue";
// 滑動方向
let swiperDir = reactive({
name: "左滑",
val: "left",
});- 方法調(diào)用
// 監(jiān)聽事件
function changeSwiper(dir) {
swiperDir.name = dir.name;
swiperDir.val = dir.val;
}案例展示
- h5 端效果
- 小程序端效果
- APP 端效果
最后
以上就是自定義滑動觸摸組件的主要內(nèi)容，更多關(guān)于uniapp項目實踐自定義滑動觸摸組件的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
這篇文章主要介紹了JavaScript實現(xiàn)在頁面間傳值的方法,涉及javascript傳值的技巧,非常具有實用價值,需要的朋友可以參考下2015-04-04
js 正則驗證密碼強度(包含數(shù)字+特殊字符+英文字母大小寫)
密碼驗證是常見的網(wǎng)站注冊方法，本文主要介紹了js 正則驗證密碼強度(包含數(shù)字+特殊字符+英文字母大小寫)，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-01-01
js變量作用域及可訪問性的探討...2006-11-11
要自動刷新網(wǎng)頁,你可以使用JavaScript腳本來實現(xiàn),下面這篇文章主要給大家介紹了關(guān)于JS實現(xiàn)網(wǎng)頁自動刷新腳本的相關(guān)資料,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2023-11-11
今天小編就為大家分享一篇淺談layui 表單元素的選中問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-10-10
Bootstrap基本插件學(xué)習(xí)筆記之Alert警告框(20)
這篇文章主要為大家詳細介紹了Bootstrap基本插件學(xué)習(xí)筆記之ALert警告框的相關(guān)資料,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-12-12
JavaScript實現(xiàn)封閉區(qū)域布爾運算的示例代碼
這篇文章主要介紹了JavaScript實現(xiàn)封閉區(qū)域布爾運算的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-06-06
JavaScript為事件句柄綁定監(jiān)聽函數(shù)實例詳解
這篇文章主要介紹了JavaScript為事件句柄綁定監(jiān)聽函數(shù)的方法,結(jié)合實例詳細分析了常見的事件句柄綁定監(jiān)聽函數(shù)的實現(xiàn)技巧,并實例講解了跨瀏覽器的實現(xiàn)方法,需要的朋友可以參考下2015-12-12
這篇文章主要介紹了JS實現(xiàn)簡單的右下角彈出提示窗口的方法,可實現(xiàn)點擊連接右下角彈出提示框的功能,具有一定參考借鑒價值,需要的朋友可以參考下2016-06-06
這篇文章主要介紹了js獲取Get值的方法,涉及javascript正則及頁面參數(shù)操作相關(guān)技巧,需要的朋友可以參考下2016-09-09