微信小程序 上下左右滑动

本文介绍了微信小程序中利用taughtstart、taughtmove、taughtend事件来判断用户滑动方向的方法。通过监听手指位置变化,确定滑动路径,并在特定容器内实现滑动操作。在taughtend事件中,可以添加动画效果并切换轮播图到下一张。
摘要由CSDN通过智能技术生成

微信小程序支持taughtstart,taughtmove,taughtend事件,通过调用这几个事件,判断手指的位置,通过位置的差值来判断手指是怎么滑动的,把事件绑定在一个容器上,设定这个容器的大小,就可以在容器内划动,然后判断其划动方向。

<view class="contentContainer" bindtouchmove="handletouchmove" bindtouchstart="handletouchstart" bindtouchend="handletouchend">
  <text>{
  {text}}</text>
</view>
data:{
   flag:0,
   text:''
},
handletouchmove: function(event) {
    // console.log(event)
    if (this.data.flag!== 0){
      return
    }
    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 
评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值