PHP前端开发

uniapp图片预览定位错误怎么解决

百变鹏仔 4周前 (11-20) #uniapp
文章标签 错误

最近在使用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 方法获取图片信息,然后根据图片信息的宽高比例进行位置调整。

具体来说,解决方法如下:

  1. 使用 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);  }})
  1. 根据图片信息的宽高比例进行位置调整。
// 计算图片上下偏移量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    });  }})

通过以上方法,我们可以通过获取图片信息的宽高比例,进行位置偏移调整,来解决图片预览定位错误的问题。

结语