1***@qq.com
1***@qq.com
  • 发布:2022-05-14 22:40
  • 更新:2022-05-14 22:40
  • 阅读:27

【报Bug】nvue 中使用 sticky定位 特殊情况下 会导致 文字不显示 (调试是发现 文字 其实发生了莫名其妙的偏移)

分类:uni-app

产品分类: uniapp/App

PC开发环境操作系统: Windows

PC开发环境操作系统版本号: window 10 专业版

HBuilderX类型: 正式

HBuilderX版本号: 3.4.6

手机系统: iOS

手机系统版本号: iOS 14

手机厂商: 苹果

手机机型: iphone XR

页面类型: nvue

vue版本: vue2

nvue编译模式: fast

打包方式: 云端

项目创建方式: HBuilderX

示例代码:
    <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>

操作步骤:

运行代码示例

预期结果:

元素正常显示 正常吸顶

实际结果:

显示异常

bug描述:

nvue 中使用 sticky定位 特殊情况下 会导致 文字不显示 (调试是发现 文字 其实发生了莫名其妙的偏移)
开始时不显示 只要人为滑动一下 文字会恢复正常
其实不只是 text 在示例代码场景下 其他标签也会出现问题

2022-05-14 22:40 负责人:DCloud_iOS_XHY 分享
已邀请:
1***@qq.com

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>  

要回复问题请先登录注册