微信小程序 使用wepy-zoom 组件 详细案例

微信小程序使用`wepy-zoom`组件主要是为了提供图片的缩放功能，它可以帮助用户在小程序中轻松预览和查看大图内容。`wepy-zoom`通常基于`wx：image-view`和`zoom-view`这两个原生组件进行封装。

以下是一个简单的使用`wepy-zoom`的示例：

<!-- index.wxml -->
<view class="container">
  <wepy-zoom :src="bigImage" @load="onLoad"> <!-- 将大图URL绑定到src属性上 -->
    <image src="{{smallImage}}" class="preview-image" /> <!-- 小图作为预览 -->
  </wepy-zoom>
</view>

<!-- index.js -->
Page({
  data: {
    smallImage: 'path/to/your/small/image.jpg',
    bigImage: 'path/to/your/large/image.jpg', // 需要在 onLoad 回调中获取
  },
  
  onLoad: function() {
    this.getBigImage(); // 获取大图并设置给bigImage
  },
  
  getBigImage: function() {
    wx.getImageInfo({
      src: this.data.smallImage,
      success: function(res) {
        this.setData({bigImage: res临时FilePaths[0]});
      }.bind(this),
    });
  }
  
  // 当用户放大或缩小时，可以添加对应的事件处理函数
  onZoomChange: function(scale) {
    console.log('Scale changed to:', scale);
  },
})

在这个例子中，`smallImage`是小图路径，当页面加载时通过`getBigImage`方法获取大图，并将结果存储在`bigImage`里。然后在`wepy-zoom`组件中，小图会被预览，用户点击或滑动可以触发缩放效果，`onZoomChange`可以在缩放改变时触发，打印出当前的缩放比例。