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
- Android側滑(右滑、下拉)返回控制元件 - SwipeBackLayoutAndroid控制元件
- vue 左滑刪除功能Vue
- Fex4中使用Group滑動翻頁
- vant小程式SwipeCell 完美解決滑動單元格右滑無樣式
- 微信小程式左滑效果微信小程式
- 一對一原始碼,滑塊驗證,滑塊左右滑動顯示的位置原始碼
- Android 設定TextView滑動滾動條和滑動效果AndroidTextView
- Vue 仿QQ左滑刪除元件Vue元件
- jQuery 效果 – 滑動jQuery
- 滑動條:QSliderIDE
- iOS 如何絲滑的側滑返回iOS
- 關於彈窗的內部滑動穿透底層頁面的滑動的問題穿透
- 帶貨直播原始碼,確定ViewPager滑塊滑動方向原始碼Viewpager
- 禁止滑動的NoScrollViewPagerViewpager
- Flutter 滑動體系Flutter
- uniapp 滑動切換APP
- Swift全屏滑動返回Swift
- UIPikerView 省市區三聯滑動,解決滑動崩潰問題UIView
- 快手-滑塊
- 小程式 — 實現左滑刪除效果(列表)③
- iOS 左滑按鈕(UITableViewRowAction)顯示圖片iOSUIView
- Vue實現一個頁面快取、左滑返回的navigatorVue快取
- 細聊滑動視窗
- 滑動視窗專題
- Flutter之可滑動WidgetFlutter
- 小程式禁止swiper滑動
- wepy 滑動刪除功能
- Sentinel 原理-滑動視窗
- CSS滑動門技術CSS
- 手指滑動方向判斷
- 模擬滑屏動畫動畫
- Android 禁止ViewPager左右滑動AndroidViewpager
- 視訊直播原始碼,新增內容滑動條,停止滑動時隱藏原始碼
- 聊天平臺原始碼,簡單使用 禁止滑動和設定滑動方向原始碼
- 給你的頁面帶上側滑返回——SlideBackIDE