账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    小程序bindtouchend在向左滑动时移出屏幕外不触发
    71
    0

    小程序bindtouchend在向左滑动时移出屏幕外不触发,但向右向上向下都可以触发
    wxml

    <view id="id" class = "ball" bindtouchstart = "handletouchtart" bindtouchmove="handletouchmove" bindtouchend="handletouchend" style = "width : 100%px; height : 40px;">
    {{text}}
    </view>

    wxss

    .ball {
      box-shadow:2px 2px 10px #AAA;
      border-radius: 20px;
      position: absolute; 
      left: 50%;
      top: 50%;
     }

    js

    Page({
     data: {
      lastX: 0,     //滑动开始x轴位置
      lastY: 0,     //滑动开始y轴位置
      text: "没有滑动",
      currentGesture: 0, //标识手势
     },
     //滑动移动事件
     handletouchmove: function (event) {
      var currentX = event.touches[0].pageX
      var currentY = event.touches[0].pageY
      var tx = currentX - this.data.lastX
      var ty = currentY - this.data.lastY
      var text = ""
      //左右方向滑动
      if (Math.abs(tx) > Math.abs(ty)) {
       if (tx < 0)
        text = "向左滑动"
       else if (tx > 0)
        text = "向右滑动"
      }
      //上下方向滑动
      else {
       if (ty < 0)
        text = "向上滑动"
       else if (ty > 0)
        text = "向下滑动"
      }
     
      //将当前坐标进行保存以进行下一次计算
      this.data.lastX = currentX
      this.data.lastY = currentY
      this.setData({
       text: text,
      });
     },
     
     //滑动开始事件
     handletouchtart: function (event) {
      //console.log(this.data.lastX)
      this.data.lastX = event.touches[0].pageX
      this.data.lastY = event.touches[0].pageY
     },
     //滑动结束事件
     handletouchend: function (event) {
      console.log(event)
      this.data.currentGesture = 0;
      this.setData({
       text: "没有滑动",
      });
     },
    })
    0
    打赏
    收藏
    点击回答
        全部回答
    • 0
    • 旧人旧事旧回忆 普通会员 1楼

      在微信小程序中,bindtouchend事件主要用于监听触摸事件,但是在向左滑动时移出屏幕外,通常不会触发。这是因为微信小程序默认在触摸到屏幕边缘时,会自动返回到原来的位置。如果需要触发向左滑动的效果,可以通过left属性来改变元素的位置。

      以下是一个简单的示例:

      ```html

      ```

      handleTouchEnd方法中,可以通过left属性来改变元素的位置:

      javascript handleTouchEnd() { this.$refs.myElement.style.left = '-100px'; }

      这样,当用户向左滑动时,left属性的值就会减小,从而实现向左滑动的效果。需要注意的是,这种方式只能实现向左滑动的效果,不能实现向右滑动的效果。

    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部