9***@qq.com
9***@qq.com
  • 发布:2022-10-20 14:47
  • 更新:2022-10-20 14:47
  • 阅读:129

【报Bug】(请看视频附件)swiper组件,通过下标,实现和另外一个区域的元素进行相关联.但是切换应用,大约10S后再返回小程序应该,会导致索引反复错乱

分类:uni-app

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

PC开发环境操作系统: Windows

PC开发环境操作系统版本号: Windows 10 企业版

HBuilderX类型: 正式

HBuilderX版本号: 3.2.16

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

基础库版本号: 2.26.2

项目创建方式: HBuilderX

示例代码:
<template>  
    <view :class="showMask? 'jasmine-pages control-scroll':'jasmine-pages'">  
        <!-- 会员轮播图 start -->  
        <view class="j-member">  
            <view class="j-member-top">  
                <view class="j-member-item">  
                    <view class="j-member-tabs" v-for="(item,index) in memberTabsList" :key="index"  
                        @click="getTabIndex(index)" :class="[  
                            (tabIndex == index && tabIndex == 0) ? 'tabIndex-1' : '',  
                            (tabIndex == index && tabIndex == 1) ? 'tabIndex-2' : '',  
                            (tabIndex == index && tabIndex == 2) ? 'tabIndex-3' : '']">  
                        {{item}}  
                    </view>  
                </view>  
            </view>  
            <view class="j-member-con" @click="toMemberCenterPage">  
                <swiper class="j-member-swiper" :current="tabIndex" :autoplay="autoplay" :indicator-dots="false"  
                    :interval="3000" :duration="500" circular='true' @change="getSwiperChange">  
                    <swiper-item class="swiper-item" v-for="(item,index) in [0,1,2]" :key="index">  
                        {{item}}  
                    </swiper-item>  
                </swiper>  
            </view>  
        </view>  

    </view>  
</template>  

<script>  
    export default {  
        data() {  
            return {  
                memberTabsList: ['入会尊享礼券', 'GET艺人周边', '积分商城'],  
                tabIndex: 0, // tabs索引  
                swiperTabIndex: 0, // 轮播图索引  
                autoplay:true,  
            };  
        },  
        onLoad(options) {  

        },  
        onShow() {  

            this.autoplay = true  
        },  
        onHide() {  
            // 已找到解决方法,在离开页面的时候,关闭swiper自动轮播  
            // this.autoplay = false    
        },  
        methods: {  

            // 获取索引  
            getTabIndex(id) {  
                this.tabIndex = id  
            },  
            //轮播对应tab  
            getSwiperChange(e) {  
                this.tabIndex = e.detail.current;  
            },  

        }  
    }  
</script>  
<style lang="less">  
    /deep/.u-popup__content {  
        background-color: rgba(255, 255, 255, 0) !important;  
    }  
</style>  
<style lang="less" scoped>  
    .jasmine-pages {  
        width: 750rpx;  
        min-height: 2123rpx;  
        background: url(https://ksfshoposs.2qrs.cn/images/Jasmine-bgc1.png) no-repeat 100% 0 #f0fae6;  
        background-size: 100%;  
        padding-top: 1245rpx;  

        .j-member {  
            position: relative;  
            margin-bottom: 200rpx;  

            .j-member-top {  
                width: 677rpx;  
                height: 66rpx;  
                margin: 0 auto;  
                // background-color: pink;  
                // border-radius: 31rpx;  
                display: flex;  
                align-items: center;  
                justify-content: space-around;  
                font-size: 28rpx;  
                font-family: SourceHanSansCN;  
                font-weight: 400;  
                color: #22441C;  
                position: relative;  

                .j-member-item {  
                    height: 66rpx;  
                    width: 677rpx;  
                    background: linear-gradient(0deg, #F3FFE4 0%, #FFFFFF 100%);  
                    border-radius: 31rpx;  
                    display: flex;  
                    align-items: center;  
                    justify-content: space-between;  
                }  

                .j-member-tabs {  
                    width: 33%;  
                    text-align: center;  
                    height: 66rpx;  
                    line-height: 66rpx;  
                    font-size: 28rpx;  
                    font-family: SourceHanSansCN;  
                    font-weight: 400;  
                    color: #22441C;  
                    position: relative;  
                }  

                .tabIndex-1:before {  
                    content: "";  
                    display: block;  
                    position: absolute;  
                    top: -38%;  
                    left: -1%;  
                    width: 250rpx;  
                    height: 103rpx;  
                    background: url(https://ksfshoposs.2qrs.cn/images/Jasmine-tabIndex-11.png) no-repeat;  
                    background-size: 100%;  
                }  

                .tabIndex-2:before {  
                    content: "";  
                    display: block;  
                    position: absolute;  
                    top: -38%;  
                    left: -1%;  
                    width: 250rpx;  
                    height: 103rpx;  
                    background: url(https://ksfshoposs.2qrs.cn/images/Jasmine-tabIndex-2.png) no-repeat;  
                    background-size: 100%;  
                }  

                .tabIndex-3:before {  
                    content: "";  
                    display: block;  
                    position: absolute;  
                    top: -38%;  
                    left: -1%;  
                    width: 250rpx;  
                    height: 103rpx;  
                    background: url(https://ksfshoposs.2qrs.cn/images/Jasmine-tabIndex-33.png) no-repeat;  
                    background-size: 100%;  
                }  

            }  

            .j-member-con {  
                width: 675rpx;  
                height: 455rpx;  
                margin: 43rpx auto 0;  
                border-radius: 24rpx;  
                overflow: hidden;  
                background-color: pink;  
            }  

        }  

    }  

    .control-scroll {  
        height: 100vh !important;  
        overflow-y: hidden !important;  
    }  

    // }  
</style>  

操作步骤:

通过到同事的电脑复现(最新版本的Hbuilder和微信开发这工具),发现也有该bug的存在
自己电脑通过该方法,通过微信开发者工具,写原生的微信小程序轮播图,发现没有该bug

预期结果:

在onHide生命周期,离开页面的时候,将swiper的autoplay属性设置为false,以关闭轮播图的自动循环

实际结果:

通过onHide生命周期的方式,达到预期效果,bug解决

bug描述:

页面通过采用swiper组件,通过下标,实现和另外一个区域的元素进行相关联,
但是切换应用,大约10S后再返回小程序应该,会导致索引反复错乱

2022-10-20 14:47 负责人:无 分享
已邀请:

要回复问题请先登录注册