微信小程序 单指平移 双指缩放图片功能

微信小程序 单指平移 双指缩放图片功能,第1张

实现功能参考: 微信小碧困程序自定义组件实现图片单指拖动、双指缩放效果 有修改。

给图片加拖灶慧旁动事件,我们需要知道它什么时候被点击、被拖拽和拖拽结束。

通过修改imageView的margin-left和margin-top来改变图片的位置以实现图片的单指移动隐橡效果和所有 *** 作结束松手后的回d效果。

通过修改imageView的宽和高以实现图片放大缩小的效果。且需要同时修改其margin-left和margin-top使图片能以【两手指的中间点为原点】缩放。

Talk is cheap, show you the code.

接下来是交互事件

1. image组件好迟默认宽度300px、高度225px  ;

2.css设置皮敬宽高(尺寸最好为rpx,更适应燃袜慎屏幕)

3.mode 设置缩放模式(13种)

样式设置宽度100%   添加属性 mode="widthFix"

4.套在div种,设置div宽高,


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/yw/12388241.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-25
下一篇 2023-05-25

发表评论

登录后才能评论

评论列表(0条)

保存