效果图如下所示
.wxml
<view bindtouchstart='touchStart' bindtouchmove='touchMove' bindtouchend="touchEnd">测试内容</view>
.wxss
view{
width: 100%;
float: left;
overflow: hidden;
height: 200rpx;
line-height: 200rpx;
text-align: center;
background-color: #e54d42;
}
.js
Page({
data: {
towards: ''
},
touchStart: function (e) {
if (e.touches.length == 1) {
this.setData({
startX: e.touches[0].clientX
});
}
},
touchMove: function (e) {
if (e.touches.length == 1) {
var moveX = e.touches[0].clientX;
var towards = this.data.startX - moveX;
this.setData({
towards: towards
})
}
},
touchEnd: function (e) {
let that = this
if (that.data.towards != '') {
let nux = that.data.curr
if (that.data.towards < 0) {//向右
console.log('向右')
} else if (that.data.towards > 0) {//向左
console.log('向左')
}
}
that.setData({
towards: ''
})
},
})
有什么问题欢迎评论留言,我会及时回复你的