一、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
