汕头搜外科技专业从事微信小程序开发,专业化打造新生态营销渠道,竭诚为您服务。
汕头搜外科技
汕头小程序定制首页 > 答疑解惑 > 微信小程序手势功能和避免重复点击
微信小程序手势功能和避免重复点击
时间 : 2018-12-23 23:14 浏览量 : 14

在开发中,有时会遇到像App中的手势那样的效果,比如小程序的拖拽、缩放和旋转手势,下面就仿照App实现了一下。

wxml部分:


<view class="touch-container">

  <view class="msg">{{msg}}</view>

  <image

    class="img"

    src="{{src}}"

    style="width: {{width}}rpx; height: {{height}}rpx; left: {{left}}rpx; top: {{top}}rpx; transform: translate(-50%, -50%) scale({{ scale }}) rotate({{ rotate }}deg);"

    bindload="bindload"

    catchtouchstart="touchstart"

    catchtouchmove="touchmove"

    catchtouchend="touchend"

  ></image>

</view>




wxss部分:


page {

  width: 100%;

  height: 100%;

  background: #ffffff;

}

.touch-container {

  width: 100%;

  height: 100%;

  padding-top: 0.1px;

}

.msg {

  width: 100%;

  height: 60rpx;

  line-height: 60rpx;

  text-align: center;

  font-size: 30rpx;

  color: #666666;

}

.img {

  position: absolute;

  width: 690rpx;

  height: 300rpx;

  transform-origin: center center;

}



js部分:


var canOnePointMove = false

var onePoint = {

  x: 0,

  y: 0

}

var twoPoint = {

  x1: 0,

  y1: 0,

  x2: 0,

  y2: 0

}

Page({

  data: {

    msg: '',

    src: 'http://img01.taopic.com/150508/318763-15050PU9398.jpg',

    width: 0,

    height: 0,

    left: 375,

    top: 600,

    scale: 1,

    rotate: 0

  },

  // 关闭上拉加载

  onReachBottom: function() {

    return

  },

  bindload: function(e) {

    var that = this

    var width = e.detail.width

    var height = e.detail.height

    if (width > 750) {

      height = 750 * height / width

      width = 750

    }

    if (height > 1200) {

      width = 1200 * width / height

      height = 1200

    }

    that.setData({

      width: width,

      height: height

    })

  },

  touchstart: function(e) {

    var that = this

    if (e.touches.length < 2) {

      canOnePointMove = true

      onePoint.x = e.touches[0].pageX * 2

      onePoint.y = e.touches[0].pageY * 2

    }else {

      twoPoint.x1 = e.touches[0].pageX * 2

      twoPoint.y1 = e.touches[0].pageY * 2

      twoPoint.x2 = e.touches[1].pageX * 2

      twoPoint.y2 = e.touches[1].pageY * 2

    }

  },

  touchmove: function(e){

    var that = this

    if (e.touches.length < 2 && canOnePointMove) {

      var onePointDiffX = e.touches[0].pageX * 2 - onePoint.x

      var onePointDiffY = e.touches[0].pageY * 2 - onePoint.y

      that.setData({

        msg: '单点移动',

        left: that.data.left + onePointDiffX,

        top: that.data.top + onePointDiffY

      })

      onePoint.x = e.touches[0].pageX * 2

      onePoint.y = e.touches[0].pageY * 2

    }else if (e.touches.length > 1) {

      var preTwoPoint = JSON.parse(JSON.stringify(twoPoint))

      twoPoint.x1 = e.touches[0].pageX * 2

      twoPoint.y1 = e.touches[0].pageY * 2

      twoPoint.x2 = e.touches[1].pageX * 2

      twoPoint.y2 = e.touches[1].pageY * 2

      // 计算角度,旋转(优先)

      var perAngle = Math.atan((preTwoPoint.y1 - preTwoPoint.y2)/(preTwoPoint.x1 - preTwoPoint.x2))*180/Math.PI

      var curAngle = Math.atan((twoPoint.y1 - twoPoint.y2)/(twoPoint.x1 - twoPoint.x2))*180/Math.PI

      if (Math.abs(perAngle - curAngle) > 1) {

        that.setData({

          msg: '旋转',

          rotate: that.data.rotate + (curAngle - perAngle)

        })

      }else {

        // 计算距离,缩放

        var preDistance = Math.sqrt(Math.pow((preTwoPoint.x1 - preTwoPoint.x2), 2) + Math.pow((preTwoPoint.y1 - preTwoPoint.y2), 2))

        var curDistance = Math.sqrt(Math.pow((twoPoint.x1 - twoPoint.x2), 2) + Math.pow((twoPoint.y1 - twoPoint.y2), 2))

        that.setData({

          msg: '缩放',

          scale: that.data.scale + (curDistance - preDistance) * 0.005

        })

      }

    }

  },

  touchend: function(e) {

    var that = this

    canOnePointMove = false

  }

})



json部分:


"navigationBarTitleText": "识别手势",

  "navigationBarTextStyle":"black",

  "navigationBarBackgroundColor": "#FFF",

  "disableScroll": true



这样一个小程序的手势功能就做好了。除了手势外,有时候我们不希望用户对某个按钮进行多次点击,比如用户点击获取验证码按钮时,没有反应,大部分用户都会接着点击,这就会造成用户收到多条验证码,这是因为后台api请求比较慢,而客户端体验又做得不到位,导致用户以为没点击到或者是页面假死,在上次请求还没处理完,就再次点击按钮。


这种情况下可以在请求执行之前显示一个模式的加载框,请求完成后再关闭加载框。


function showLoading(message) {

  if (wx.showLoading) {

    // 基础库 1.1.0 微信6.5.6版本开始支持,低版本需做兼容处理

    wx.showLoading({

      title: message,

      mask: true

    });

  } else {

    // 低版本采用Toast兼容处理并将时间设为20秒以免自动消失

    wx.showToast({

      title: message,

      icon: 'loading',

      mask: true,

      duration: 20000

    });

  }

}

 

function hideLoading() {

  if (wx.hideLoading) {

    // 基础库 1.1.0 微信6.5.6版本开始支持,低版本需做兼容处理

    wx.hideLoading();

  } else {

    wx.hideToast();

  }

}





如果当点击事件需要页面跳转时,不太适合显示加载框,但小程序的页面跳转并不是很快,如果不作处理又会导致用户反复点击打开多个页面,这里可以使用限制按钮或控件的点击间隔的方式处理,同样可以将这个方法放到公共的代码里面比如util,然后在使用时直接调用即可。


function buttonClicked(self) {

  self.setData({

    buttonClicked: true

  })

  setTimeout(function () {

    self.setData({

      buttonClicked: false

    })

  }, 500)

}




Page({

  data: {

    buttonClicked: false

  },

  click: function (e) {

    util.buttonClicked(this);

    var id = e.currentTarget.dataset.id;

    wx.navigateTo({

      url: '../detail/detail?id=' + id

    })

  },

})



好了,今天关于为微信小程序的开发教程就讲到这里,有疑问的朋友可以与我们联系,搜外可以随时欢迎大家前来咨询。


相关文章

微信小程序的特性

婚庆小程序的功能有哪些-汕头小程序开发为您解答

微信小程序商城对比优势

欢迎在线留言
您的姓名 :
联系电话 :
邮箱地址 :
联系地址 :
留言内容 :
  • 价格低廉

  • 简单高效

  • 功能全面

  • 贴心售后

cache
Processed in 0.004544 Second.