微信下程序(手势滑动图片缩放)

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/male09/article/details/83540952

微信下程序(手势滑动图片缩放)组件
先看效果:

1. 下载组件 手势缩放组件
2. 导入组件
   连同文件复制到自己的项目中
3. 配置组件
   在自己的页面总的json中如图配置
   

{
  "usingComponents": {
    "zoomImg":"../libs/ZoomPreview/index"
  }
}

4. 引入组件
   
5. 在wxjs中配置

let zoomId = this.selectComponent("#zoomId");let zoomId = this.selectComponent("#zoomId");
    let igPath = "../../../images/zoomImg.jpg";
    zoomId.setImgSrc(igPath);

详解: `zoomId.setImgSrc(igPath);//通过设置组件的预览图片地址
注意: 如果是网络图片直接传图完整路径(路径+图片名+图片格式),如果是相对路径,必须是组件相对的图片路径
如果不想下载那就复制粘贴自己写组价------->跟我来写

.wxml 文件

<view class="container">
  <scroll-view class="img" bindtouchstart="touchstartCallback" bindtouchmove="touchmoveCallback" bindtouchend="touchendCallback" scroll-x="true" scroll-y="true">
    <image style="zoom:{{stv.scale}};" src='{{stv.imgPath}}'></image>
  </scroll-view>
</view>

.wxss 文件

.img{
  width: 100%;
  height: 100%;
  background: white;
  text-align: center;
}

.js 文件

Component({
  data: {
    stv: {
      zoom: false, //是否缩放状态
      distance: 0, //两指距离
      scale: 1, //缩放倍数
      imgPath: "../../../images/timg.jpg", //图片路径
    }
  },
  methods: {
    setImgSrc: function(imgPath) {
      this.setData({
        'stv.imgPath': imgPath,
      })
    },
    //事件处理函数
    touchstartCallback: function(e) {
      //触摸开始
      if (e.touches.length === 1) {
        let {
          clientX,
          clientY
        } = e.touches[0];
        this.startX = clientX;
        this.startY = clientY;
        this.touchStartEvent = e.touches;
      } else {
        let xMove = e.touches[1].clientX - e.touches[0].clientX;
        let yMove = e.touches[1].clientY - e.touches[0].clientY;
        let distance = Math.sqrt(xMove * xMove + yMove * yMove);
        this.setData({
          'stv.distance': distance,
          'stv.zoom': true, //缩放状态
        })
      }

    },
    touchmoveCallback: function(e) {
      //触摸移动中
      if (e.touches.length === 1) {
        //单指移动
        if (this.data.stv.zoom) {
          //缩放状态，不处理单指
          return;
        }
        let {
          clientX,
          clientY
        } = e.touches[0];
        let offsetX = clientX - this.startX;
        let offsetY = clientY - this.startY;
        this.startX = clientX;
        this.startY = clientY;
        let {
          stv
        } = this.data;
        stv.offsetX += offsetX;
        stv.offsetY += offsetY;
        stv.offsetLeftX = -stv.offsetX;
        stv.offsetLeftY = -stv.offsetLeftY;
        this.setData({
          stv: stv
        });

      } else {
        //双指缩放
        let xMove = e.touches[1].clientX - e.touches[0].clientX;
        let yMove = e.touches[1].clientY - e.touches[0].clientY;
        let distance = Math.sqrt(xMove * xMove + yMove * yMove);

        let distanceDiff = distance - this.data.stv.distance;
        let newScale = this.data.stv.scale + 0.005 * distanceDiff;
        this.setData({
          'stv.distance': distance,
          'stv.scale': newScale > 1 ? newScale:1,
        })
      }

    },
    touchendCallback: function(e) {
      //触摸结束
      if (e.touches.length === 0) {
        this.setData({
          'stv.zoom': false, //重置缩放状态
        })
      }
    },
  }
})

.json 文件

{
  "component": true,
  "usingComponents": {}
}

--------------完-----------------运行试试
有什么问题及时提出,不吝赐教
邮箱: [email protected]