uv_UI
uv_UI
  • 发布:2023-07-18 23:26
  • 更新:2023-10-09 01:36
  • 阅读:692

【报Bug】在swiper和picker-view在同一个页面使用时存在BUG

分类:uni-app

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

PC开发环境操作系统: Windows

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

HBuilderX类型: 正式

HBuilderX版本号: 3.8.4

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

基础库版本号: 2.33.0

项目创建方式: HBuilderX

示例代码:
    <view>  
        <view>  
            <swiper class="swiper" circular :indicator-dots="true" :vertical="true" :autoplay="true" :interval="1000">  
                <swiper-item>  
                    <view class="swiper-item uni-bg-red">A</view>  
                </swiper-item>  
                <swiper-item>  
                    <view class="swiper-item uni-bg-green">B</view>  
                </swiper-item>  
                <swiper-item>  
                    <view class="swiper-item uni-bg-blue">C</view>  
                </swiper-item>  
            </swiper>  
        </view>  
        <view>  
            <view class="uni-padding-wrap">  
                <view class="uni-title">日期:{{year}}年{{month}}月{{day}}日</view>  
            </view>  
            <picker-view v-if="visible" :indicator-style="indicatorStyle" :value="value" @change="bindChange" class="picker-view">  
                <picker-view-column>  
                    <view class="item" v-for="(item,index) in years" :key="index">{{item}}年</view>  
                </picker-view-column>  
                <picker-view-column>  
                    <view class="item" v-for="(item,index) in months" :key="index">{{item}}月</view>  
                </picker-view-column>  
                <picker-view-column>  
                    <view class="item" v-for="(item,index) in days" :key="index">{{item}}日</view>  
                </picker-view-column>  
            </picker-view>  
        </view>  
    </view>  
</template>  
<script>  
    export default {  
        data: function() {  
            const date = new Date()  
            const years = []  
            const year = date.getFullYear()  
            const months = []  
            const month = date.getMonth() + 1  
            const days = []  
            const day = date.getDate()  
            for (let i = 1990; i <= date.getFullYear(); i++) {  
                years.push(i)  
            }  
            for (let i = 1; i <= 12; i++) {  
                months.push(i)  
            }  
            for (let i = 1; i <= 31; i++) {  
                days.push(i)  
            }  
            return {  
                title: 'picker-view',  
                years,  
                year,  
                months,  
                month,  
                days,  
                day,  
                value: [9999, month - 1, day - 1],  
                visible: true,  
                indicatorStyle: `height: 50px;`  
            }  
        },  
        methods: {  
            bindChange: function(e) {  
                const val = e.detail.value  
                this.year = this.years[val[0]]  
                this.month = this.months[val[1]]  
                this.day = this.days[val[2]]  
            }  
        }  
    }  
</script>  
<style>  
    .picker-view {  
        width: 750rpx;  
        height: 600rpx;  
        margin-top: 20rpx;  
    }  
    .item {  
        line-height: 100rpx;  
        text-align: center;  
    }  
</style>

操作步骤:

运行示例代码,然后滚动选择器进行选择

预期结果:

不要闪动

实际结果:

闪到原始位置再闪到选的位置

bug描述:

  1. 在一个页面同时使用swiper和picker-view,在swiper设置:vertical="true"时,同时设置自动切换。
  2. 在自动切换前去选择picker-view中的选项,在选完后一瞬间如果swiper正好切换。
  3. 这时候就会出现picker-view中的值闪到之前的位置,然后再闪到选择后值的BUG
  4. 下面附件代码或示例代码可以直接复现该BUG
2023-07-18 23:26 负责人:无 分享
已邀请:
p***@163.com

p***@163.com

我和你碰到了同样的问题
花了我一周的时间,最终才发现 swiper 和 picker-view 在同一个页面有这样的bug

这一上网一搜,就搜到了你的帖子
你的描述和我碰到的是一模一样的

期待能有个解决办法

要回复问题请先登录注册