梦尋Junjie
梦尋Junjie
  • 发布:2021-06-18 19:46
  • 更新:2024-06-21 17:12
  • 阅读:1139

【报Bug】uni-swiper-dot 与 swiper 做轮播, 从后台切换到前台 出现卡顿

分类:uni-app

产品分类: uniapp/小程序/微信

PC开发环境操作系统: Windows

PC开发环境操作系统版本号: 64

HBuilderX类型: 正式

HBuilderX版本号: 3.1.19

第三方开发者工具版本号: 1.05.2106091

基础库版本号: 1.17.3

项目创建方式: 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

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

2021-06-18 19:46 负责人:无 分享
已邀请:
YJG

YJG - YJG

可以看一下微信小程序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
}

梦尋Junjie

梦尋Junjie (作者) - 原来她有男朋友

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

密码:bug

梦尋Junjie

梦尋Junjie (作者) - 原来她有男朋友

<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;  
    }
会飞的deram

会飞的deram

解决了吗?

会飞的deram

会飞的deram

我也遇到这个问题

要回复问题请先登录注册