Comment résoudre l'erreur de positionnement de l'aperçu de l'image Uniapp

Récemment, j'ai rencontré quelques problèmes lors de l'utilisation d'uniapp pour développer une fonction de prévisualisation d'image. Plus précisément, lors de l'appel du composant de prévisualisation d'image intégré d'uniapp, le positionnement de l'image est décalé, ce qui est très ennuyeux. Après de nombreuses recherches et dépannages, j'ai enfin trouvé la solution. Partagez mon expérience, j'espère que cela pourra être utile à tout le monde.

Description du problème

Tout d'abord, examinons les performances spécifiques du problème. Lorsque vous utilisez la méthode uni.previewImage pour prévisualiser les images dans uniapp, les images sont mal alignées. Comme le montre l'image ci-dessous : uni.previewImage 方法预览图片时，出现了Comment résoudre lerreur de positionnement de laperçu de limage Uniapp的情况。如下图所示：

可以看到，图片定位偏差较大，和我们在页面上看到的图片位置有所偏差。

问题原因

接下来，我们来分析一下这个问题的原因。通过查阅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

On peut voir que l'écart de positionnement de l'image est important et qu'il s'écarte de la position de l'image que nous voyons sur la page.
2. Cause du problème

Ensuite, analysons la cause de ce problème. En consultant la documentation officielle d'uniapp, on peut savoir que la méthode uni.previewImage est utilisée de la manière suivante :

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

Parmi elles, focus sur le actuel code> paramètre. Ce paramètre est utilisé pour définir la position initiale de l'image d'aperçu. S'il n'est pas défini, le système positionnera l'image sur la première par défaut. Cependant, des problèmes peuvent survenir si l'image est obscurcie ou décalée par d'autres éléments.

Solution

#🎜🎜#Alors, comment résoudre le problème ? Après de nombreuses expériences et recherches, j'ai trouvé une solution relativement simple et efficace, qui consiste à utiliser la méthode uni.getImageInfo pour obtenir des informations sur l'image, puis à ajuster la position en fonction du rapport largeur/hauteur de l'image. informations sur les images. #🎜🎜##🎜🎜# Plus précisément, la solution est la suivante : #🎜🎜#

#🎜🎜#Utilisez la méthode uni.getImageInfo pour obtenir des informations sur l'image. #🎜🎜##🎜🎜#

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

#🎜🎜##🎜🎜#Ajustez la position en fonction du rapport largeur/hauteur des informations de l'image. #🎜🎜##🎜🎜#rrreee#🎜🎜#Grâce à la méthode ci-dessus, nous pouvons résoudre le problème du mauvais positionnement de l'aperçu de l'image en obtenant le rapport hauteur/largeur des informations sur l'image et en ajustant le décalage de position. #🎜🎜##🎜🎜#Conclusion#🎜🎜##🎜🎜#Ce qui précède est la solution que j'ai obtenue grâce à la recherche et au résumé. J'espère que cela aide tout le monde. Dans les projets réels, nous pouvons utiliser ces techniques de manière flexible pour améliorer l’efficacité du développement et optimiser l’expérience utilisateur. #🎜🎜#

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!