- 发布：2023-06-12 14:31
- 更新：2023-07-26 17:14
- 阅读：284
产品分类： uniapp/App
PC开发环境操作系统： Mac
PC开发环境操作系统版本号： 13.3.1
HBuilderX类型： 正式
HBuilderX版本号： 3.8.4
手机系统： 全部
手机系统版本号： Android 14
手机厂商： 华为
手机机型： 荣耀v30， iphone12
页面类型： vue
vue版本： vue3
打包方式： 离线
项目创建方式： HBuilderX
测试过的手机：
示例代码：
// html
<scroll-view
id="goods-info-body"
:scroll-y="true"
:scroll-top="scrollViewTop"
:show-scrollbar="false"
:scroll-with-animation="true"
style="height: calc(100vh - 44px)"
>
// 锚点导航
<view class="tab-bar-wapper">
<view v-for="item in tabbarList" :key="item.id" @click="onTabBarClick(item)">
</view>
</view>
</scroll-view>
// js
const onTabBarClick = (item) => {
scrollViewTop = item.top
}
// html
<scroll-view
id="goods-info-body"
:scroll-y="true"
:scroll-top="scrollViewTop"
:show-scrollbar="false"
:scroll-with-animation="true"
style="height: calc(100vh - 44px)"
>
// 锚点导航
<view class="tab-bar-wapper">
<view v-for="item in tabbarList" :key="item.id" @click="onTabBarClick(item)">
</view>
</view>
</scroll-view>
// js
const onTabBarClick = (item) => {
scrollViewTop = item.top
}
操作步骤：
<scroll-view>组件scroll-with-animation设置为true，点击锚点导航动态修改<scroll-view>组件scroll-top属性值
<scroll-view>组件scroll-with-animation设置为true，点击锚点导航动态修改<scroll-view>组件scroll-top属性值
预期结果：
点击锚点导航动态修改scrollViewTop属性值，滚动动画流程且锚点导航固定
点击锚点导航动态修改scrollViewTop属性值，滚动动画流程且锚点导航固定
实际结果：
点击锚点导航动态修改scrollViewTop属性值，滚动动画卡顿且锚点导航dom闪烁抖动，（锚点导航dom消失后又出现）
点击锚点导航动态修改scrollViewTop属性值，滚动动画卡顿且锚点导航dom闪烁抖动，（锚点导航dom消失后又出现）
bug描述：
在<scroll-view>组件内有一个positon: fixed定位的锚点导航，动态修改scrollTop值使页面滚动的时候，滚动动画卡顿且该锚点导航会出现闪烁的情况（锚点导航dom消失后又出现）
2***@qq.com (作者)
没有解决
2023-09-06 13:56