uni-app 瀑布流灵活配置 简单易用 兼容vue2vue3小程序、H5、app等多端 - uv_UI 在3个图片时，web端多次刷新会出现重复多次显示的情况

针对您提到的uni-app瀑布流组件在web端多次刷新后出现图片重复显示的问题，这通常与数据绑定或组件的渲染逻辑有关。下面我将提供一个基本的瀑布流实现代码示例，并强调一些可能导致重复渲染的关键点，以便您排查和解决问题。请注意，此示例基于Vue 3，但uni-app支持Vue 2和Vue 3的语法，因此您可能需要根据实际情况稍作调整。

瀑布流组件示例

首先，确保您的项目中已经安装了uni-app并正确配置了开发环境。

1. 创建瀑布流组件 Waterfall.vue

<template>
  <view class="waterfall">
    <view v-for="(item, index) in items" :key="index" class="item">
      <image :src="item.src" class="image"></image>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    images: {
      type: Array,
      required: true
    }
  },
  data() {
    return {
      items: []
    };
  },
  watch: {
    images(newVal) {
      this.items = newVal;
    }
  }
};
</script>

<style>
.waterfall {
  column-count: 3; /* 3列瀑布流 */
  column-gap: 10px;
}
.item {
  break-inside: avoid;
  margin-bottom: 10px;
}
.image {
  width: 100%;
  display: block;
}
</style>

2. 在页面中使用瀑布流组件

<template>
  <view>
    <Waterfall :images="images" />
  </view>
</template>

<script>
import Waterfall from '@/components/Waterfall.vue';

export default {
  components: {
    Waterfall
  },
  data() {
    return {
      images: [
        { src: 'url1' },
        { src: 'url2' },
        { src: 'url3' }
      ]
    };
  },
  mounted() {
    // 模拟数据刷新，实际应用中可能是从API获取数据
    setInterval(() => {
      this.images = [...this.images]; // 强制触发更新，但不应导致重复
    }, 5000);
  }
};
</script>

排查建议

• 确保数据唯一性：检查images数组中的数据是否每次刷新时都被正确重置或更新，避免旧数据残留。
• 避免重复渲染：使用key属性确保每个列表项的唯一性，帮助Vue识别哪些元素需要被重新渲染。
• 检查定时器或异步请求：如果使用了定时器或异步请求来更新数据，确保在数据更新前清空旧数据或正确处理数据合并。

通过上述代码示例和排查建议，您应该能够定位并解决图片重复显示的问题。如果问题依旧存在，请进一步检查数据绑定和组件渲染的逻辑。