uniapp---app滑動翻頁(上滑、下滑、左滑、右滑)
(1)為頁面繫結【touchstart】【touchend】事件
<template>
<view class="home" @touchstart="start" @touchend="end">
//.......
</view>
</template>
(2)js部分
<script>
export default {
data() {
return {
startData: {
clientX: 0,
clientY: 0
}
}
},
methods:{
start(e) {
console.log("開始下滑座標", e.changedTouches[0].clientY)
this.startData.clientX = e.changedTouches[0].clientX;
this.startData.clientY = e.changedTouches[0].clientY;
},
end(e) {
console.log("結束下滑座標", e.changedTouches[0].clientY)
const subX = e.changedTouches[0].clientX - this.startData.clientX;
const subY = e.changedTouches[0].clientY - this.startData.clientY;
if (subY < -50) {
console.log('下滑')
// 翻頁
uni.navigateTo({
url: "/pages/camera/camera"
})
} else if (subY > 50) {
console.log('上滑')
} else if (subX > 50) {
console.log('左滑')
uni.navigateTo({
url: "/pages/login/login"
})
} else if (subX < -50) {
console.log('右滑')
} else {
console.log('無效')
}
}
}
</script>
相關文章
- 移動端左滑右滑元件元件
- 短視訊平臺搭建,淡入淡出 支援左滑右滑輪播圖
- Taro UI開發小程式實現左滑喜歡右滑不喜歡效果UI
- web前端仿手機左右滑動(手滑+自動滑動)Web前端
- 移動端上滑實現翻頁功能
- Android側滑(右滑、下拉)返回控制元件 - SwipeBackLayoutAndroid控制元件
- vue 左滑刪除功能Vue
- 微信小程式左滑效果微信小程式
- vant小程式SwipeCell 完美解決滑動單元格右滑無樣式
- 一對一原始碼,滑塊驗證,滑塊左右滑動顯示的位置原始碼
- jQuery 效果 – 滑動jQuery
- Listview禁止滑動View
- iOS 如何絲滑的側滑返回iOS
- Vue 仿QQ左滑刪除元件Vue元件
- Android 設定TextView滑動滾動條和滑動效果AndroidTextView
- (有圖)仿QQ側滑選單:RecyclerView側滑選單,長按拖拽,滑動刪除View
- 關於彈窗的內部滑動穿透底層頁面的滑動的問題穿透
- 粘性控制元件,滑動停留StickLayout(導航欄滑動停留)控制元件
- 帶貨直播原始碼,確定ViewPager滑塊滑動方向原始碼Viewpager
- Flutter 滑動體系Flutter
- Swift全屏滑動返回Swift
- 滑動條:QSliderIDE
- Android的左滑關閉視窗Android
- Swift一款絲滑的側滑返回Swift
- UIPikerView 省市區三聯滑動,解決滑動崩潰問題UIView
- js實現手機網頁滑動JS網頁
- 快手-滑塊
- 打造絲般順滑的 H5 翻頁庫H5
- 小程式 — 實現左滑刪除效果(列表)③
- iOS 左滑按鈕(UITableViewRowAction)顯示圖片iOSUIView
- flutter 中監聽滑動事件Flutter事件
- 禁止滑動的NoScrollViewPagerViewpager
- 小程式禁止swiper滑動
- uniapp 滑動切換APP
- CSS滑動門技術CSS
- Android 多屏滑動Android
- iOS7滑動返回iOS
- 類似抖音直播間滑動載入頁