在开发中,有时会遇到像App中的手势那样的效果,下面就仿照App实现了一下。
wxml部分:
<view class="touch-container">
"msg">{{msg}}</view>
"img"
style"width: {{}}rpx; heightheight leftleft toptop transform translate(-50%,-%) scale({{ scale }}) rotate rotate deg);"
catchtouchstart"touchstart"
catchtouchend"touchend"
</view>
wxss部分:
}
msg 60rpx;
fontsize30rpx;
}
position absolute690rpx300rpx;
js部分:
var canOnePointMove = false
x0,
twoPoint x1 y2
0
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