How to solve the positioning error in uniapp image preview

Recently, I encountered some problems when using uniapp to develop a picture preview function. Specifically, when calling the built-in image preview component of uniapp, the positioning of the image is offset, which is very annoying. After much troubleshooting and research, I finally found the solution. Share my experience, hope it can be helpful to everyone.

Problem Description

First, let’s take a look at the specific problem performance. When using the uni.previewImage method in uniapp to preview an image, the image is misaligned. As shown in the figure below:

#It can be seen that the positioning of the image deviates greatly from the position of the image we see on the page.

Cause of the problem

Next, let’s analyze the cause of this problem. By consulting the official uniapp documentation, we can learn that the uni.previewImage method is used as follows:

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);
    }
  }
})

Among them, focus on the current parameter. This parameter is used to set the initial position of the preview image. If not set, the system will position the image to the first one by default. However, problems can arise if the image is obscured or offset by other elements.

Solution

So, how to solve the problem? After many experiments and research, I found a relatively simple and effective solution, which is to use the uni.getImageInfo method to obtain image information, and then adjust the position according to the width and height ratio of the image information.

Specifically, the solution is as follows:

1. Use the uni.getImageInfo method to obtain image information.

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);
  }
})

2. Adjust the position according to the width and height ratio of the image information.

// 计算图片上下偏移量
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
    });
  }
})

Through the above method, we can solve the problem of incorrect image preview positioning by obtaining the width and height ratio of the image information and adjusting the position offset.

Conclusion

The above is the solution I got through research and summary. Hope it helps everyone. In actual projects, we can flexibly use these techniques to improve development efficiency and optimize user experience.

The above is the detailed content of How to solve the positioning error in uniapp image preview. For more information, please follow other related articles on the PHP Chinese website!