微信小程序-上下左右滑动操作

wxml部分

<view class="container">

<view class='father'>

<view id="id" class="ball" bindtap="handletap" bindtouchstart="handletouchtart" bindtouchmove="handletouchmove">

<text>{{text}}</text>

</view>

<view calss="ball2">

<view class='son son1'>111</view>

<view class='son son2'>222</view>

<view class='son son3'>333</view>

</view>

</view>

</view>

 

js部分

Page({

data: {

lastX: 0,

lastY: 0,

text: "没有滑动啦啦啦啦啦啦啦啦啦啦啦",

},

handletouchmove: function (event) {

console.log(event)

let currentX = event.touches[0].pageX

let currentY = event.touches[0].pageY

let tx = currentX - this.data.lastX

let ty = currentY - this.data.lastY

let text = ""

//左右方向滑动

// if (Math.abs(tx) > Math.abs(ty)) {

// if (tx < 0)

// text = "向左滑动"

// else if (tx > 0)

// text = "向右滑动"

// }

// //上下方向滑动

// else {

if (ty < 0)

text = "向上滑动啦啦啦啦啦啦啦啦啦啦啦",

wx.showToast({

title: '向上',

icon: 'success',

duration: 2000

})

 

else if (ty > 0)

text = "向下滑动啦啦啦啦啦啦啦啦啦啦啦"

// wx.showToast({

// title: '向下',

// icon: 'success',

// duration: 2000

// })

// }

//将当前坐标进行保存以进行下一次计算

this.data.lastX = currentX

this.data.lastY = currentY

this.setData({

text: text,

});

}

})