• 微信小程序——页面滑动事件


    wxml:

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

    wxss:

    1 .ball {
    2   box-shadow:2px 2px 10px #AAA;
    3   border-radius: 20px;
    4   position: absolute; 
    5 }

    js:

     1 //js
     2 Page({
     3   data: {
     4     lastX: 0,          //滑动开始x轴位置
     5     lastY: 0,          //滑动开始y轴位置
     6     text: "没有滑动",
     7     currentGesture: 0, //标识手势
     8   },
     9   //滑动移动事件
    10   handletouchmove: function (event) {
    11     var currentX = event.touches[0].pageX
    12     var currentY = event.touches[0].pageY
    13     var tx = currentX - this.data.lastX
    14     var ty = currentY - this.data.lastY
    15     var text = ""
    16     //左右方向滑动
    17     if (Math.abs(tx) > Math.abs(ty)) {
    18       if (tx < 0)
    19         text = "向左滑动"
    20       else if (tx > 0)
    21         text = "向右滑动"
    22     }
    23     //上下方向滑动
    24     else {
    25       if (ty < 0)
    26         text = "向上滑动"
    27       else if (ty > 0)
    28         text = "向下滑动"
    29     }
    30 
    31     //将当前坐标进行保存以进行下一次计算
    32     this.data.lastX = currentX
    33     this.data.lastY = currentY
    34     this.setData({
    35       text: text,
    36     });
    37   },
    38 
    39   //滑动开始事件
    40   handletouchtart: function (event) {
    41     this.data.lastX = event.touches[0].pageX
    42     this.data.lastY = event.touches[0].pageY
    43   },
    44   //滑动结束事件
    45   handletouchend: function (event) {
    46     this.data.currentGesture = 0;
    47     this.setData({
    48       text: "没有滑动",
    49     });
    50   },
    51 })

    原文:http://blog.csdn.net/crazytea/article/details/53228755

  • 相关阅读:
    微信小程序地图组件中的include-points怎样缩放视野并将所有坐标点在规定的视野内展示?
    两种常见的mysql集群架构
    layui+oss阿里云附件上传回调报错问题
    redis hash过期时间
    Static和Extern关键字理解
    代理模式
    中介者模式
    访问者模式
    模板方法模式
    迭代器模式
  • 原文地址:https://www.cnblogs.com/wangyuyuan/p/7552431.html
Copyright © 2020-2023  润新知