wx.previewimage详解

一、wx.previewimage 定制

wx.previewimage 是一个小程序组件，用于预览图片，用户可以通过手势缩放、旋转、平移等操作查看。在进行页面设计时，我们通常需要根据不同的需求，对 wx.previewimage 组件进行定制。下面通过代码示例来进行说明。


// html代码
<view class="preview" bindtap="previewImage" data-src="https://example.com/example.jpg">
  <image class="preview-img" src="https://example.com/example.jpg">
</view>

// js代码
Page({
  previewImage: function (event) {
    wx.previewImage({
      current: event.currentTarget.dataset.src,
      urls: [event.currentTarget.dataset.src],
      // 定制options
      longPressActions: { // 长按图片显示的操作
        itemList: ['保存图片'],
        success: function (res) {
          if (res.tapIndex === 0) {
            wx.downloadFile({ // 下载图片
              url: event.currentTarget.dataset.src,
              success: function (res) {
                wx.saveImageToPhotosAlbum({ // 保存图片
                  filePath: res.tempFilePath,
                  success: function () {
                    wx.showToast({
                      title: '保存成功'
                    })
                  }
                })
              }
            })
          }
        }
      }
    })
  }
})

在上述代码中，我们通过使用 bindtap 事件和 data-src 属性来实现点击预览图片的功能。同时，我们还对 options.appParameter 进行了定制，将长按图片显示的操作改为了保存图片。这样，用户可以通过长按图片来保存到本地相册中。

二、wx.previewimage不调用

在实际项目中，我们可能会遇到 wx.previewimage 没有被调用的情况。这个问题的原因可能有多种，例如数据渲染出错、图片链接错误等。在这种情况下，我们需要逐一排查各种可能性，找到问题所在。下面通过代码示例来进行说明。


// html代码
<view class="preview" bindtap="previewImage" data-src="{{ item.src }}">
  <image class="preview-img" src="{{ item.thumb }}">
</view>

// js代码
Page({
  data: {
    list: [
      {thumb: 'https://example.com/thumb1.jpg', src: 'https://example.com/example1.jpg'},
      {thumb: 'https://example.com/thumb2.jpg', src: 'https://example.com/example2.jpg'}
    ]
  },
  previewImage: function (event) {
    wx.previewImage({
      current: event.currentTarget.dataset.src,
      urls: this.data.list.map(item => item.src),
      fail: function (err) {
        console.error(err)
      }
    })
  }
})

在上述代码中，我们通过使用 data-src 和 data-thumb 属性来动态绑定图片的 src 和缩略图 src。同时，我们通过 fail 回调函数来在预览图片失败时，输出错误信息。这样，我们就可以找到问题所在并进行修复了。

三、wx.previewimage 遮盖

在进行图片预览时，我们可能需要动态生成多张图片，并将它们排列在一行或多行中。在这种情况下，我们可能遇到图片遮盖的问题。例如，某个图片的宽度比其他图片宽，导致下面的图片被遮盖了。我们可以通过合理的 CSS 样式，来解决这个问题。下面通过代码示例来进行说明。


// css代码
.preview-wrapper {
  display: flex;
  flex-wrap: wrap;
}
.preview {
  box-sizing: border-box;
  width: 25%;
  padding: 10px;
}
.preview-img {
  width: 100%;
}

// html代码
<view class="preview-wrapper">
  <view class="preview" bindtap="previewImage" data-src="https://example.com/example1.jpg">
    <image class="preview-img" src="https://example.com/example1.jpg">
  </view>
  <view class="preview" bindtap="previewImage" data-src="https://example.com/example2.jpg">
    <image class="preview-img" src="https://example.com/example2.jpg">
  </view>
  <view class="preview" bindtap="previewImage" data-src="https://example.com/example3.jpg">
    <image class="preview-img" src="https://example.com/example3.jpg">
  </view>
  <view class="preview" bindtap="previewImage" data-src="https://example.com/example4.jpg">
    <image class="preview-img" src="https://example.com/example4.jpg">
  </view>
</view>

// js代码
Page({
  previewImage: function (event) {
    wx.previewImage({
      current: event.currentTarget.dataset.src,
      urls: [
        'https://example.com/example1.jpg',
        'https://example.com/example2.jpg',
        'https://example.com/example3.jpg',
        'https://example.com/example4.jpg'
      ]
    })
  }
})

在上述代码中，我们通过使用 flex 和 width 样式来为每张图片进行排列，并设置了 padding 样式。这样，即使某张图片的宽度比其他图片宽，也不会造成其它图片的遮盖。同时，我们通过使用 bindtap 事件和 data-src 属性来实现点击预览图片的功能。

四、wx.previewimage 自定义

在图片预览中，我们可能需要对预览组件进行定制。例如，更改预览弹窗的背景色、调整预览操作的位置等。在这种情况下，我们可以使用 WXML 和 WXSS 来进行自定义。下面通过代码示例来进行说明。


// wxml代码
<view class="preview-wrapper">
  <view class="preview" bindtap="previewImage" data-src="https://example.com/example1.jpg">
    <image class="preview-img" src="https://example.com/example1.jpg">
  </view>
  <view class="preview" bindtap="previewImage" data-src="https://example.com/example2.jpg">
    <image class="preview-img" src="https://example.com/example2.jpg">
  </view>
  <view class="preview" bindtap="previewImage" data-src="https://example.com/example3.jpg">
    <image class="preview-img" src="https://example.com/example3.jpg">
  </view>
  <view class="preview" bindtap="previewImage" data-src="https://example.com/example4.jpg">
    <image class="preview-img" src="https://example.com/example4.jpg">
  </view>
</view>

// wxss代码
.preview-image-view {
  background-color: rgba(0, 0, 0, 0.5); // 更改背景色
}
.preview-image-footer {
  bottom: 150rpx; // 调整操作位置
}

// js代码
Page({
  previewImage: function (event) {
    wx.previewImage({
      current: event.currentTarget.dataset.src,
      urls: [
        'https://example.com/example1.jpg',
        'https://example.com/example2.jpg',
        'https://example.com/example3.jpg',
        'https://example.com/example4.jpg'
      ],
      // 自定义样式
      fail: function () {
        wx.showToast({
          title: '预览图片失败',
          icon: 'none'
        })
      },
      success: function () {
        wx.pageScrollTo({ // 跳转到底部
          scrollTop: 99999,
          duration: 300
        })
      }
    })
  }
})

在上述代码中，我们通过使用 WXML 和 WXSS 来分别定义预览组件的结构和样式。同时，我们通过在 options 中定义 fail 和 success 回调函数，来实现预览失败时的提示和预览成功时的跳转效果。这样，我们就可以实现对 wx.previewimage 组件的自定义了。

五、wx.previewimage 一直加载

在进行图片预览时，我们可能会遇到图片一直加载的问题。这个问题可能和图片链接、网络状态等多种因素有关。在这种情况下，我们需要逐一排查问题。下面通过代码示例来进行说明。


// html代码
<view class="preview" bindtap="previewImage" data-src="https://example.com/example.jpg">
  <image class="preview-img" src="https://example.com/example.jpg" mode="aspectFit">
</view>

// js代码
Page({
  previewImage: function (event) {
    wx.previewImage({
      current: event.currentTarget.dataset.src,
      urls: [event.currentTarget.dataset.src],
      fail: function (err) {
        console.error(err)
      },
      success: function (res) {
        console.log('预览成功:', res)
      },
      complete: function () {
        console.log('预览完成')
      }
    })
  }
})

在上述代码中，我们通过使用 bindtap 事件和 data-src 属性来实现点击预览图片的功能。同时，我们通过设置 mode 属性来指定图片填充方式。在 options 中，我们定义了 fail、success 和 complete 回调函数。这样，即使图片一直加载，我们也可以通过输出信息来进行排查。

原创文章，作者：IRTB，如若转载，请注明出处：https://www.506064.com/n/138611.html