<div class="pageWrapper">
<scroller class="scroller">
<div v-for="(item,index) in 20" :key="index"
style="height: 100px;background-color: red;margin-bottom: 10px;">
<div style="position: sticky;top: 0;">
<text>{{item}}</text>
</div>
</div>
</scroller>
</div>
</template>
<script>
export default {
data() {
return {}
},
onLoad() {},
methods: {}
}
</script>
<style>
.scroller {
flex: 1;
}
</style>
1***@qq.com
- 发布：2022-05-14 22:40
- 更新：2022-05-27 16:46
- 阅读：633
产品分类： uniapp/App
PC开发环境操作系统： Windows
PC开发环境操作系统版本号： window 10 专业版
HBuilderX类型： 正式
HBuilderX版本号： 3.4.6
手机系统： iOS
手机系统版本号： iOS 14
手机厂商： 苹果
手机机型： iphone XR
页面类型： nvue
vue版本： vue2
打包方式： 云端
项目创建方式： HBuilderX
示例代码：
操作步骤：
运行代码示例
运行代码示例
预期结果：
元素正常显示 正常吸顶
元素正常显示 正常吸顶
实际结果：
显示异常
显示异常
bug描述：
nvue 中使用 sticky定位 特殊情况下 会导致 文字不显示 （调试是发现 文字 其实发生了莫名其妙的偏移）
开始时不显示 只要人为滑动一下 文字会恢复正常
其实不只是 text 在示例代码场景下 其他标签也会出现问题
1***@qq.com (作者)
<template>
<div class="pageWrapper">
<scroller class="scroller">
<div v-for="(item,index) in 20" :key="index"
style="height: 100px;background-color: red;margin-bottom: 10px;">
<div style="position: sticky;top: 0;">
<text>{{item}}</text>
</div>
</div>
</scroller>
</div>
</template>
<script>
export default {
data() {
return {}
},
onLoad() {},
methods: {}
}
</script>
<style>
.scroller {
flex: 1;
}
</style>
