uni-app ios下 app使用uni.pagescrollto 滚动动画时间小于100ms使页面元素闪烁

操作步骤：

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

预期结果：

正常滚动到指定位置

实际结果：

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

bug描述：

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

附件

songsunli 1楼•13 天前

<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>

htzhanglong 2楼•13 天前

实际情况是右边的商品卡片也会跟着闪烁，目前给的demo里只有sticky部分闪烁

songsunli 3楼•13 天前

这个问题我也出现了，效果和你描述的一样，你那边找到了什么解决方案了吗？

bupafengyu 4楼•13 天前

我也遇到了一样的问题

itying888 5楼•13 天前

请问有解决方案吗，因为一定要设置滚动时间为0，这个问题就一直存在无法解决

h691938207 6楼•13 天前

在 UniApp 中，使用 uni.pageScrollTo 进行页面滚动时，如果设置的滚动动画时间（duration）小于 100ms，可能会导致页面元素出现闪烁或抖动的问题。这是因为 iOS 设备在处理非常短的动画时间时，可能无法平滑地完成动画过渡，导致页面渲染出现问题。

解决方法

增加动画时间：将 duration 设置为至少 100ms 或更长，以确保动画能够平滑执行。例如：
```
uni.pageScrollTo({
    scrollTop: 0,
    duration: 100 // 设置为100ms或更长
});
```

使用 requestAnimationFrame：如果你确实需要非常短的动画时间，可以考虑使用 requestAnimationFrame 来实现更精细的控制，避免页面闪烁。

function smoothScrollTo(scrollTop, duration) {
    const start = window.pageYOffset;
    const distance = scrollTop - start;
    let startTime = null;

    function animation(currentTime) {
        if (startTime === null) startTime = currentTime;
        const timeElapsed = currentTime - startTime;
        const run = easeInOutQuad(timeElapsed, start, distance, duration);
        window.scrollTo(0, run);
        if (timeElapsed < duration) requestAnimationFrame(animation);
    }

    function easeInOutQuad(t, b, c, d) {
        t /= d / 2;
        if (t < 1) return c / 2 * t * t + b;
        t--;
        return -c / 2 * (t * (t - 2) - 1) + b;
    }

    requestAnimationFrame(animation);
}

smoothScrollTo(0, 50); // 50ms的滚动时间