微信小程序-上下左右滑动操作
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, }); } }) 优质内容筛选与推荐>>
1、Perl命令行常见用法及技巧
2、代码习惯（持续更新）
3、getopt详解
4、AdapterView及其子类之四：基于ListView及SimpleAdapter实现列表
5、iOS的后台任务
<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, }); } }) 优质内容筛选与推荐>>
1、Perl命令行常见用法及技巧
2、代码习惯（持续更新）
3、getopt详解
4、AdapterView及其子类之四：基于ListView及SimpleAdapter实现列表
5、iOS的后台任务