uni-app 【报Bug】vue3+cli项目环境下，uni.previewImage方法预览图片时如果放大了某张图片会导致图片未滑动到边时切换到下一张图片

发布于 1周前 作者 itying888 来自 Uni-App

uni-app 【报Bug】vue3+cli项目环境下，uni.previewImage方法预览图片时如果放大了某张图片会导致图片未滑动到边时切换到下一张图片

示例代码：

<template>  
  <view class="content">  
    <image class="logo" src="/static/logo.png" />  
    <view class="text-area">  
      <text class="title" @click="preview">{{ title }}</text>  
    </view>  
  </view>  
</template>  

<script setup lang="ts">  
import { ref } from "vue";  
const title = ref("Hello");  
const cleanUrls = [  
  'https://img1.baidu.com/it/u=3371310401,2796076407&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=815',  
  'https://img0.baidu.com/it/u=2936523526,719751699&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=889',  
  'https://img2.baidu.com/it/u=4178203642,3744466266&fm=253&fmt=auto&app=120&f=JPEG?w=1024&h=640',  
  'https://img0.baidu.com/it/u=2386318967,533302891&fm=253&fmt=auto&app=138&f=JPEG?w=333&h=499',  
  'https://img2.baidu.com/it/u=1674892642,4115805177&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=281',  
];  
const preview = () => {  
  uni.previewImage({  
    current: 0,  
    urls: cleanUrls,  
    indicator: "default",  
    loop: true,  
  });  
};  
</script>

操作步骤：

BUG 描述中我上传了一个附件为复现代码环境。启动该服务后，点击页面中的标题触发预览图片的效果，然后放大任意一张图片，再左右滑动该图片查看图片的各处细节，即可发现滑动时再该图片未滑动到边时会切换到下一张图片。

预期结果：

等该放大的图片拖动到边时再切换到下一张

实际结果：

图片未滑动到边时会切换到下一张图片

bug描述：

uni.previewImage方法预览图片时，如果对某一张图片放大后想再拖动看该图片的其它细节时，会触发swiper的事件，图片会切换到下一张。 正确的逻辑是等该放大的图片拖动到边时再切换到下一张。
该bug在各浏览器上均可复现

信息类别 详细信息
产品分类 uniapp/H5
PC开发环境 Windows
PC操作系统版本 win10
浏览器平台 Safari
浏览器版本 ios 16.0
项目创建方式 CLI
CLI版本号 3.0.0-4000720240327002

Harmonyos Next教程
4 回复

你好，我这里测试：放大后可以在边上停下，之后可以再次滑动到下一个后切换突破。你可以录一下你那的效果吗？


我录制上传到附件了，辛苦看一下

这个问题我也无复现了。仅预览一张图片，放大后拖动，拖动到一半暂停一下 别一下拖到边缘，再拖就发现拖不动了（感觉像是图片发生了截取）

在uni-app中使用uni.previewImage方法进行图片预览时，确实可能会遇到一些与图片切换和滑动相关的问题。你提到的“放大了某张图片后未滑动到边时切换到下一张图片”的问题，可能是由于手势识别或者事件处理上的冲突。以下是一个简化的代码示例，并尝试解决这类问题的一种可能方法。

首先，确保你的uni-app项目已经正确配置了Vue 3和相关的依赖。然后，你可以尝试以下代码来实现图片预览功能，并尝试处理滑动和放大后切换的问题。

代码示例

1. 安装依赖 确保你已经安装了uni-app和Vue 3相关的依赖。

2. 页面组件代码

<template>
  <view>
    <button @click="previewImages">预览图片</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      urls: [
        'https://example.com/image1.jpg',
        'https://example.com/image2.jpg',
        'https://example.com/image3.jpg'
      ]
    };
  },
  methods: {
    previewImages() {
      uni.previewImage({
        current: this.urls[0], // 当前显示图片的http链接
        urls: this.urls // 需要预览的图片http链接列表
      });

      // 监听图片预览的事件，尝试处理滑动问题
      uni.$on('previewImage:change', (event) => {
        console.log('切换到图片', event.detail.current);
        // 这里可以添加逻辑来检测是否滑动到边缘，或处理放大后的切换问题
        // 例如，可以通过设置定时器或监听滑动事件来延迟切换
      });
    }
  }
};
</script>

<style scoped>
/* 样式可以根据需要调整 */
</style>

3. 尝试的解决方案

由于uni-app的previewImage组件封装了原生的图片预览功能，直接修改其内部逻辑较为困难。你可以尝试以下策略：

  • 监听事件：如上代码所示，监听previewImage:change事件，根据事件详情判断用户是否已滑动到边缘。
  • 自定义滑动逻辑：如果上述方法无法解决问题，考虑使用自定义的图片预览组件，通过swiper组件实现图片的预览和滑动，这样可以完全控制滑动和放大后的行为。

注意：由于uni-app和原生组件的限制，某些问题可能无法直接通过代码解决。在这种情况下，建议查阅uni-app的官方文档或社区，看是否有其他开发者遇到并解决了类似的问题。

回到顶部