WXML：
<view class='btn' bindtouchstart='touchStart' bindtouchmove='touchMove' bindtouchend='touchEnd'>
OK
</view>
JS：
data: {
touchS : [0,0],
touchE : [0,0]
},
touchStart: function(e){
// console.log(e.touches[0].pageX)
let sx = e.touches[0].pageX
let sy = e.touches[0].pageY
this.data.touchS = [sx,sy]
},
touchMove: function(e){
let sx = e.touches[0].pageX
let sy = e.touches[0].pageY
this.data.touchE = [sx, sy]
},
touchEnd: function(e){
let start = this.data.touchS
let end = this.data.touchE
console.log(start)
console.log(end)
if(start[0] <end[0] - 50){
console.log('右滑')
}else if(start[0] >兄拍 end[0] + 50){
console.log('左滑')
}else{
console.log('静止')
}
},
在 touchstart 时，监听到触摸开始时的 （x, y）位置；在 touchMove 方法中持续监听触摸点的位置（x, y），并保存在 data 中；在 touchEnd 方法中对开始的触摸位置和结束的触摸位置进行判断，如果移动距离大于 50 则判定为发生触摸滑动事件。
在上面示例中，当 X 轴方向的移动超过 50 时即判定为左滑或右滑，相应的也可以通过判断 Y 轴方向的滑动长度，来判断上滑或是下滑，由此实现触摸滑动的功能。
更多信息联系我的微
小程序实现满屏上下滑动效果写的时候发现网上没有好用的，要么过于复杂，要么不太实用，我就自己整了个简单的
直接上代码部分
//wxml部分
<swiper indicator-dots="true" indicator-color="green" indicator-active-color="red" autoplay="true" interval="5000" duration="1000" circular="true" vertical="true">
<swiper-item wx:for="{{images}}">
<image src="{{item}}" mode="scaleToFill"></image>
</swiper-item>
</swiper>
下面是js部分，大部分都是自动生成的函数，只要在data里面拦仔凳存放图片地址就行，其他的可以不用管
// pages/template/template.js
Page({
/**
* 页面的初始数据
*/
data: {
images: ["/pages/template/images/1.png","/pages/template/images/2.png","/pages/template/images/3.png","/pages/template/images/4.png"]
},
/**
* 生命周期函数--监听页面加载
*/简旅
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/戚枣
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
效果图
iphone5表现效果
在这里插入图片描述
iphone 12/13 Pro Max表现效果
在这里插入图片描述
本人前端一般般，可能会有问题，仅供参考
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）