小程序的拖拽、缩放和旋转手势

在开发中,有时会遇到像App中的手势那样的效果,下面就仿照App实现了一下。 
wxml部分:

  1. <view class="touch-container">
  2. "msg">{{msg}}</view>
  3. "img"
  4. style"width: {{}}rpx; heightheight leftleft toptop transform translate(-50%,-%) scale({{ scale }}) rotate rotate deg);"
  5. catchtouchstart"touchstart"
  6. catchtouchend"touchend"
  7. </view>

wxss部分:


  • }
  • msg 60rpx;
  • fontsize30rpx;
  • }
  • position absolute690rpx300rpx;
  • js部分:

    var canOnePointMove = false
  • x0,
  • twoPoint x1 y20
  • Page({
  • msg '' src'http://img01.taopic.com/150508/318763-15050PU9398.jpg' height left375 top600 scale1 rotate0
  • onReachBottomfunction() return
  • width edetailwidth
  • ifwidth >750 height 750*/ width
  • }
  • 1200 height
  • thatsetData({
  • touchstartthis
  • onePointx [].pageX 2
  • }else twoPointx1 2
  • x2 y2 touchmove){
  • onePointDiffY y
  • left thatdataleft + onePointDiffX toptop onePointDiffY
  • preTwoPoint JSONparseJSONstringifytwoPoint))
  • perAngle Mathatan((preTwoPoint preTwoPointy2)/(x2))*180/PI
  • (absperAngle curAngle that msg'旋转' rotaterotate curAngle perAngle)
  • predistance sqrtpow),0);"> curdistance ))
  • scalescale curdistance predistance0.005
  • }
  • json部分:

    "navigationBarTitleText""识别手势"  "navigationBarTextStyle":"black""navigationBarBackgroundColor""#FFF""disableScroll"true

  • 相关文章

    开发微信小程序的用户授权登录功能
    小程序开发页面如何实现跳转?
    浅谈小程序开发中蓝牙连接错误分析及解决方法
    什么是小程序?它有哪些功能?
    如何配置小程序开发项目结构?(教程)
    怎么把自己的店加入小程序