uni-app中 uni-swiper-dot 与 swiper 做轮播时从后台切换到前台出现卡顿

开发环境	版本号	项目创建方式
Windows	64	HBuilderX

示例代码：

<template>  
<uni-swiper-dot class="page-11" :info="list" field="content" :current="current">  
<swiper class="box-swiper" @change="change" :autoplay="true" :interval="interval" :duration="duration"  
current="current">
    <swiper-item v-for="(item ,index) in list" :key="index" @click="open(item)">
        <view class="swiper-item">
            <cc-image group="home-ad" :src="item.image" mode="widthFix"></cc-image>
        </view>
    </swiper-item>
</swiper>
</uni-swiper-dot>
</template>  

<script>
import ajax from "@/utils/ajax.js";
import jut from "@/utils/jut.js"; 

export default {  
    name: "home-main-carousel",  
    data() {  
        return {  
            interval: 3000,  
            duration: 500,  
            list: [],  
            current: 0  
        };  
    },  
    mounted() {  
        this.load();  
    },  
    methods: {  
        load() {  
            ajax('/ad/carousel/of-home').cache().get(list => this.list = list);  
        },  
        change(e) {  
            this.current = e.detail.current;  
        },  
        open(item) {  
            let data = {};  
            if (item.data) {  
                data = JSON.parse(item.data)  
            } else {  
                return;  
            }  
            let url;  
            let param;  
            if (data.open.indexOf("?") == -1) {  
                url = data.open;  
                param = {};  
            } else {  
                param = jut.search(data.open);  
                url = data.open.substr(0, data.open.indexOf("?"));  
            }  
            this.$Router.push({  
                path: url,  
                query: param,  
            });  
        }  
    }  
}  
</script>  

<style lang="scss">
.page-11,
.box-swiper,
.swiper-item{
width: 100vw;
height: 318.75rpx;
}
</style>

操作步骤：

打开后运行一会切换到后台, 然后过一会再次切换回来就出现这样的问题,真机运行

预期结果：

无卡顿

实际结果：

卡卡卡卡

bug描述：

密码 bug
不知道什么原因一致, 在用一段时间后就会出现这个问题,频繁的切换更容易出现这个问题

更多关于uni-app中 uni-swiper-dot 与 swiper 做轮播时从后台切换到前台出现卡顿的实战教程也可以访问 https://www.itying.com/category-93-b0.html

nodeper 1楼

可以看一下微信小程序swiper的文档

swiper的change的参数可以打印一下， let source = e.detail.source 卡顿的时候 source是空的,刷新当前index的时候判断一下触发的类型可以
let source = e.detail.source if (source == ‘autoplay’ || source == ‘touch’) { this.currentIndex = e.detail.current }

更多关于uni-app中 uni-swiper-dot 与 swiper 做轮播时从后台切换到前台出现卡顿的实战教程也可以访问 https://www.itying.com/category-93-b0.html

yibo5220 2楼

视频地址 https://v.youku.com/v_show/id_XNTE3MDk3MTM3Ng==.html?spm=a2hbt.13141534.0.13141534
密码:bug

yibo5220 3楼

<template> <uni-swiper-dot class="page-11" :info="list" field="content" :current="current"> <swiper class="box-swiper" @change="change" :autoplay="true" :interval="interval" :duration="duration" :current="current"> <swiper-item v-for="(item ,index) in list" :key="index" @click="open(item)"> <view class="swiper-item"> <cc-image group="home-ad" :src="item.image" mode="widthFix"></cc-image> </view> </swiper-item> </swiper> </uni-swiper-dot> </template> import ajax from "@/utils/ajax.js"; import jut from "@/utils/jut.js";

export default {  
    name: "home-main-carousel",  
    data() {  
        return {  
            interval: 3000,  
            duration: 500,  
            list: [],  
            current: 0  
        };  
    },  
    mounted() {  
        this.load();  
    },  
    methods: {  
        load() {  
            ajax('/ad/carousel/of-home').cache().get(list => this.list = list);  
        },  
        change(e) {  
            this.current = e.detail.current;  
        },  
        open(item) {  
            let data = {};  
            if (item.data) {  
                data = JSON.parse(item.data)  
            } else {  
                return;  
            }  
            let url;  
            let param;  
            if (data.open.indexOf("?") == -1) {  
                url = data.open;  
                param = {};  
            } else {  
                param = jut.search(data.open);  
                url = data.open.substr(0, data.open.indexOf("?"));  
            }  
            this.$Router.push({  
                path: url,  
                query: param,  
            });  
        }  
    }  
}
.page-11,  
.box-swiper,  
.swiper-item{  
    width: 100vw;  
    height: 318.75rpx;  
}<br>

itying888 4楼

解决了吗？

htzhanglong 5楼

我也遇到这个问题

sinazl 6楼

这个问题通常是由于页面生命周期切换导致的swiper组件状态异常。

主要原因：

应用从后台切换到前台时，swiper的autoplay状态没有正确恢复
页面隐藏/显示过程中，swiper的定时器管理出现问题
组件重新渲染时，current索引可能不同步

解决方案：

export default {
    data() {
        return {
            interval: 3000,
            duration: 500,
            list: [],
            current: 0,
            isActive: true // 控制swiper是否活跃
        };
    },
    onShow() {
        // 页面显示时恢复swiper状态
        this.isActive = true;
        // 重置current确保索引正确
        if (this.list.length > 0) {
            this.current = this.current % this.list.length;
        }
    },
    onHide() {
        // 页面隐藏时暂停swiper
        this.isActive = false;
    },
    mounted() {
        this.load();
    },
    methods: {
        load() {
            ajax('/ad/carousel/of-home').cache().get(list => {
                this.list = list;
                // 数据加载后重置current
                this.current = 0;
            });
        },
        change(e) {
            if (this.isActive) {
                this.current = e.detail.current;
            }
        }
    }
}

模板调整：