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

最新推荐文章于 2024-08-08 11:12:43 发布

极乐叔

最新推荐文章于 2024-08-08 11:12:43 发布

阅读量3.2k

点赞数 1

分类专栏：微信小程序

本文链接：https://blog.csdn.net/rolan1993/article/details/81285067

版权

本文介绍了如何在小程序中实现类似App的手势操作，包括拖拽、缩放和旋转功能。作者honey缘木鱼分享了wxml、wxss、js和json四个部分的实现代码，为小程序开发者提供了详细的实现步骤。

摘要由CSDN通过智能技术生成

在开发中，有时会遇到像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;