准备一个高度大于屏幕高度很多的容器，以及两个sticky元素，一个顶部导航一个侧边导航，点击侧边导航使用uni.pagescrollto滚动
当滚动页面较大且动画时间小与100ms时页面元素闪烁
corsun
- 发布：2022-04-15 19:17
- 更新：2023-05-27 09:37
- 阅读：743
产品分类： uniapp/App
PC开发环境操作系统： Windows
PC开发环境操作系统版本号： win10
HBuilderX类型： 正式
HBuilderX版本号： 3.3.13
手机系统： iOS
手机系统版本号： iOS 15
手机厂商： 苹果
手机机型： iphone7
页面类型： vue
vue版本： vue2
打包方式： 云端
项目创建方式： HBuilderX
操作步骤：
预期结果：
正常滚动到指定位置
正常滚动到指定位置
实际结果：
正常滚动到指定位置但是页面元素闪烁
正常滚动到指定位置但是页面元素闪烁
bug描述：
在ios中
使用uni.pagescrollto滚动到指定位置会导致包括sticky在内的页面元素闪烁
滚动时间为0
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>
