【报Bug】ios下 app使用uni.pagescrollto 滚动动画时间小与100ms使页面元素闪烁

分类：uni-app

bug反馈

产品分类： uniapp/App

PC开发环境操作系统： Windows

PC开发环境操作系统版本号： win10

HBuilderX类型：正式

HBuilderX版本号： 3.3.13

手机系统： iOS

手机系统版本号： iOS 15

手机厂商：苹果

手机机型： iphone7

页面类型： vue

vue版本： vue2

打包方式：云端

项目创建方式： HBuilderX

操作步骤：

准备一个高度大于屏幕高度很多的容器，以及两个sticky元素，一个顶部导航一个侧边导航，点击侧边导航使用uni.pagescrollto滚动
当滚动页面较大且动画时间小与100ms时页面元素闪烁

预期结果：

正常滚动到指定位置

实际结果：

正常滚动到指定位置但是页面元素闪烁

bug描述：

在ios中
使用uni.pagescrollto滚动到指定位置会导致包括sticky在内的页面元素闪烁
滚动时间为0

RPReplay_Final1650602707.zip

ios_bug.zip

2022-04-15 19:17 负责人:DCloud_UNI_GSQ 分享

5 个回复

corsun (作者)

<template>  
    <view  style="height: 5000px;background-image: linear-gradient(#e66465, #9198e5);" >  
        <view class="" style='height: 200px;'>  
        </view>  
        <view style="position: sticky;top: 0px;height: 50px;background: #4CD964;z-index: 100;">  
            头部导航栏  
        </view>  
        <view class="" style="height: 5000px;">  
            <view  style="vertical-align: top; position: sticky;top: 50px;height: 300px;background: #007AFF;width: 100px;display: inline-block;width: 20%;">  
                <view @click="jump(index)" v-for="(item,index) in list" style="display: flex;align-items: center;justify-content: center;height: 50px;">  
                    {{item}}  
                </view>  

            </view>  
            <view style="display: inline-block;width: 80%;background: white;">  
                <view v-for="(item,index) in 20" style="height: 200px;background-color: red;margin-bottom: 20px;">  
                    <view style="position: sticky;top: 50px;height: 50px;">  
                        卡片的吸顶分类  
                    </view>  
                    商品卡片  
                </view>  
            </view>  
        </view>  

    </view>  
</template>  

<script>  
    export default {  
        data() {  
            return {  
                list:['商品分类1','商品分类2','商品分类3','商品分类4','商品分类5','商品分类6','商品分类7','商品分类8']  
            }  
        },  
        onLoad() {  

        },  
        methods: {  
            jump(i){  
                uni.pageScrollTo({  
                    duration:0,  
                    scrollTop:i*400  
                })  
            }  
        }  
    }  
</script>  

<style>  

</style>