corsun
corsun
  • 发布:2022-04-15 19:17
  • 更新:2024-05-13 14:58
  • 阅读:849

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

分类:uni-app

产品分类: 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

2022-04-15 19:17 负责人:DCloud_UNI_GSQ 分享
已邀请:
corsun

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

corsun (作者)

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

年少的张三丰

年少的张三丰

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

uniappyyds

uniappyyds

我也遇到了一样的问题

2***@qq.com

2***@qq.com

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

要回复问题请先登录注册