uni-app swiper组件在数据比上次少的情况下出现白屏

uni-app swiper组件在数据比上次少的情况下出现白屏

开发环境 版本号 项目创建方式
Windows 企业版22H2 HBuilderX

产品分类：uniapp/App

PC开发环境操作系统：Windows

HBuilderX类型：正式

HBuilderX版本号：4.17

手机系统：Android

手机系统版本号：Android 12

手机厂商：华为

手机机型：EML-TL00

页面类型：vue

vue版本：vue3

打包方式：云端

App下载地址或H5网址：https://www.pgyer.com/manager/dashboard/app/44ac7fccd18db9f5f785bec2f8aa12a5

示例代码：

<template>  
<view class="tui-banner-bg" :style="{marginBottom:height}">
  <!--banner-->
  <view class="tui-banner-box" :style="{background: background, padding:padding}">
    <swiper :indicator-dots="true" :autoplay="true" :interval="5000" :duration="150" class="tui-banner-swiper" 
    style="{height:height,borderRadius:borderRadius,boxShadow: shadow && '0 0 20rpx #333'}"
    circular="true" indicator-color="rgba(255, 255, 255, 0.8)" indicator-active-color="#fff">
      <swiper-item v-for="(item, index) in data" :key="index" @tap.stop="$go">
        <image :src="item" class="tui-slide-image" :style="{height:height}" mode="scaleToFill" />
      </swiper-item>
    </swiper>
  </view>
</view>
</template>  

<script>
export default {
name: "my-banner",
props:{
  data: {
    type: Array,
    default: function() {
      return []
    },
  },
  background: {
    type: String,
    default:'linear-gradient(to bottom,#950015, #faf6f5)'
  },
  padding: {
    type: String,
    default:'0 20rpx'
  },
  height: {
    type: String,
    default:'240rpx'
  },
  borderRadius: {
    type: String,
    default:'10rpx'
  },
  shadow: {
    type: Boolean,
    default:false
  }
},
data() {
  return {  
  };
},
created() {  
// console.log(this.data)  
},
methods: {  
  // 进入详情页  
  $go(){  
    /* uni.navigateTo({  
        url: '/pages/home/lawyer'  
    }); */  
  },  
}
</script>

更多关于uni-app swiper组件在数据比上次少的情况下出现白屏的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app swiper组件在数据比上次少的情况下出现白屏的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在 uni-app 中使用 swiper 组件时，如果数据比上次少，可能会出现白屏的情况。这通常是由于 swiper 组件的内部机制导致的，尤其是当 swiper-item 的数量发生变化时，swiper 可能没有正确更新当前显示的 swiper-item。

以下是一些可能的解决方案：

1. 强制 swiper 重新渲染

在数据发生变化时，可以通过设置 key 属性来强制 swiper 组件重新渲染。这样可以确保 swiper 正确更新 swiper-item 的数量。

<template>
  <swiper :key="swiperKey">
    <swiper-item v-for="(item, index) in items" :key="index">
      <view>{{ item }}</view>
    </swiper-item>
  </swiper>
</template>

<script>
export default {
  data() {
    return {
      items: [], // 你的数据
      swiperKey: 0
    };
  },
  watch: {
    items() {
      // 数据变化时更新 key
      this.swiperKey += 1;
    }
  }
};
</script>

2. 手动设置 current 属性

如果数据减少后，swiper 的 current 属性仍然指向一个不存在的 swiper-item，也会导致白屏。你可以在数据变化后手动设置 current 属性为一个有效的值。

<template>
  <swiper :current="currentIndex">
    <swiper-item v-for="(item, index) in items" :key="index">
      <view>{{ item }}</view>
    </swiper-item>
  </swiper>
</template>

<script>
export default {
  data() {
    return {
      items: [], // 你的数据
      currentIndex: 0
    };
  },
  watch: {
    items(newItems) {
      // 如果 currentIndex 超出范围，设置为最后一个 item 的索引
      if (this.currentIndex >= newItems.length) {
        this.currentIndex = newItems.length - 1;
      }
    }
  }
};
</script>

3. 使用 v-if 控制 swiper 的显示

在某些情况下，你可以使用 v-if 来控制 swiper 的显示，确保在数据变化时 swiper 能够正确更新。

<template>
  <swiper v-if="items.length > 0">
    <swiper-item v-for="(item, index) in items" :key="index">
      <view>{{ item }}</view>
    </swiper-item>
  </swiper>
  <view v-else>没有数据</view>
</template>

<script>
export default {
  data() {
    return {
      items: [] // 你的数据
    };
  }
};
</script>

4. 使用 nextTick 延迟更新

有时候，swiper 的更新可能需要一些时间，你可以使用 nextTick 来延迟更新 current 属性。

<template>
  <swiper :current="currentIndex">
    <swiper-item v-for="(item, index) in items" :key="index">
      <view>{{ item }}</view>
    </swiper-item>
  </swiper>
</template>

<script>
export default {
  data() {
    return {
      items: [], // 你的数据
      currentIndex: 0
    };
  },
  watch: {
    items(newItems) {
      this.$nextTick(() => {
        // 如果 currentIndex 超出范围，设置为最后一个 item 的索引
        if (this.currentIndex >= newItems.length) {
          this.currentIndex = newItems.length - 1;
        }
      });
    }
  }
};
</script>
回到顶部