uni-app swiper组件在微信小程序熄屏后无限来回滚动 onchange事件毫秒级触发

uni-app swiper组件在微信小程序熄屏后无限来回滚动 onchange事件毫秒级触发

开发环境 版本号 项目创建方式
Windows 11 CLI

操作步骤：

<view class="home-swiper">  
    <swiper autoplay circular class="swiper" :style="{height:swiperHeight+'px'}" :current="curSwiperIndex" @change="swiperChange">  
        <swiper-item v-for="(item,index) in list1" :key="index">  
            <image :src="item" mode="aspectFill" />  
        </swiper-item>  
    </swiper>  
    <!-- 自定义指示器小图 -->  
    <view class="home-swiper-indicator">  
        <image :src="item" mode="aspectFill" v-for="(item,index) in list1" :key="index"  
            :class="{'home-swiper-indicator-active':index === curSwiperIndex}" @click="curSwiperIndex = index"></image>  
    </view>  
</view>

预期结果：

正常轮播

实际结果：

熄屏后打开无限轮播

bug描述：

swiper微信小程序熄屏后无限来回滚动 onchange事件毫秒级触发了

Image


更多关于uni-app swiper组件在微信小程序熄屏后无限来回滚动 onchange事件毫秒级触发的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

提供完整单页面源码，比说明 vue 和 HBuilderX 依赖版本，测试一下原生小程序是否有问题

更多关于uni-app swiper组件在微信小程序熄屏后无限来回滚动 onchange事件毫秒级触发的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在uni-app中，swiper 组件通常用于实现轮播图效果。当遇到在微信小程序中熄屏后 swiper 组件无限来回滚动，并且 onchange 事件毫秒级触发的问题时，这可能是由于某些事件触发异常或者组件内部状态管理出错导致的。以下是一个基本的 swiper 组件代码示例，并附带一些可能的解决思路，你可以根据实际情况进行调整和排查。

基本 swiper 组件代码示例

<template>
  <view>
    <swiper
      :autoplay="autoplay"
      interval="3000"
      duration="500"
      circular
      @change="onSwiperChange"
    >
      <swiper-item v-for="(item, index) in items" :key="index">
        <image :src="item.src" mode="aspectFill" class="swiper-image"></image>
      </swiper-item>
    </swiper>
  </view>
</template>

<script>
export default {
  data() {
    return {
      autoplay: true,
      interval: 3000, // 自动切换时间间隔
      duration: 500,  // 滑动动画时长
      items: [
        { src: 'https://example.com/image1.jpg' },
        { src: 'https://example.com/image2.jpg' },
        { src: 'https://example.com/image3.jpg' }
      ]
    };
  },
  methods: {
    onSwiperChange(event) {
      console.log('Swiper changed to index:', event.detail.current);
      // 可以在这里添加防抖逻辑
      this.debounceChange(event.detail.current);
    },
    debounceChange(index) {
      // 防抖函数，确保事件不会频繁触发
      if (!this.timeout) {
        this.timeout = setTimeout(() => {
          console.log('Debounced index:', index);
          this.timeout = null;
        }, 500); // 防抖时间间隔
      }
    }
  },
  beforeDestroy() {
    // 清除防抖定时器
    if (this.timeout) {
      clearTimeout(this.timeout);
      this.timeout = null;
    }
  }
};
</script>

<style>
.swiper-image {
  width: 100%;
  height: 300px;
}
</style>

解决思路

  1. 防抖处理：在 onchange 事件处理函数中，添加防抖逻辑，确保事件不会因频繁触发而导致性能问题。
  2. 检查 autoplay 设置：确保 autoplay 属性设置正确，避免不必要的自动滚动。
  3. 监听系统事件：尝试监听微信小程序的系统事件，如 onHide 和 onShow，在 onShow 时重置 swiper 组件的状态。
  4. 检查外部干扰：确认是否有其他代码或事件干扰了 swiper 的正常行为。

通过以上方法，你应该能够定位并解决 swiper 组件在微信小程序熄屏后无限来回滚动的问题。如果问题依然存在，建议进一步排查代码逻辑或咨询uni-app官方社区。

回到顶部