最近在使用uniapp开发一个图片预览的功能时，遇到了一些问题。具体是调用uniapp内置的图片预览组件时，图片的定位存在偏移，让人感到很烦恼。经过多次排查和研究，我终于找到了解决方案。分享一下我的经验，希望能够对大家有所帮助。
问题描述
首先，我们看一下具体的问题表现。在uniapp中使用 uni.previewImage 方法预览图片时，出现了图片错位的情况。如下图所示：
可以看到，图片定位偏差较大，和我们在页面上看到的图片位置有所偏差。
问题原因
接下来，我们来分析一下这个问题的原因。通过查阅uniapp官方文档，我们可以得知 uni.previewImage 方法的使用方式如下：
uni.previewImage({
urls: [], // 需要预览的图片链接列表
current: '', // 当前显示图片的链接,不填则默认为urls的第一张
indicator: true, // 是否显示图片指示器
loop: true, // 是否可以循环预览
longPressActions: { // 长按图片显示操作菜单
itemList: ['发送给朋友', '保存图片', '收藏'],
success: function(data) {
console.log('success:' + data.tapIndex);
},
fail: function(err) {
console.log('fail:', err.errMsg);
}
}
})其中，重点关注 current 参数。这个参数是用来设置预览图片的初始位置的。如果不设置，系统会默认将图片位置定位到第一张。但是，如果图片是被其他元素遮挡或者偏移过的，那么就会产生问题。
解决方案
那么，问题该如何解决呢？在经过多次实验和研究后，我发现了一个比较简单有效的解决方法，即使用 uni.getImageInfo 方法获取图片信息，然后根据图片信息的宽高比例进行位置调整。
具体来说，解决方法如下：
- 使用
uni.getImageInfo方法获取图片信息。
uni.getImageInfo({
src: 'https://img.php.cn/upload/article/000/000/068/168255885723504.png', // 图片链接
success: function(res) {
// 图片加载成功，获取图片信息
const width = res.width; // 图片宽度
const height = res.height; // 图片高度
const aspectRatio = width / height; // 图片宽高比例
// 根据宽高比例进行图片位置调整
},
fail: function(err) {
// 图片加载失败
console.log(err);
}
})- 根据图片信息的宽高比例进行位置调整。
// 计算图片上下偏移量
const windowHeight = uni.getSystemInfoSync().windowHeight; // 屏幕高度
const marginTop = (windowHeight - width / aspectRatio) / 2; // 上侧偏移量
const marginBottom = (windowHeight + width / aspectRatio) / 2; // 下侧偏移量
// 调用预览图片组件
uni.previewImage({
urls: [], // 需要预览的图片链接列表
current: '', // 当前显示图片的链接,不填则默认为urls的第一张
indicator: true, // 是否显示图片指示器
loop: true, // 是否可以循环预览
longPressActions: { // 长按图片显示操作菜单
itemList: ['发送给朋友', '保存图片', '收藏'],
success: function(data) {
console.log('success:' + data.tapIndex);
},
fail: function(err) {
console.log('fail:', err.errMsg);
}
},
// 调整图片位置
// 注意：这里只调整上下偏移量，如果需要左右偏移量也可以进行计算
success: function() {
uni.pageScrollTo({
scrollTop: marginTop,
duration: 0
});
},
complete: function() {
uni.pageScrollTo({
scrollTop: 0,
duration: 0
});
}
})通过以上方法，我们可以通过获取图片信息的宽高比例，进行位置偏移调整，来解决图片预览定位错误的问题。
结语
以上就是我通过研究和总结，得到的解决方法。希望可以对大家有所帮助。在实际项目中，我们可以灵活地运用这些技巧，提高开发效率，优化用户体验。
