uni-app scroll-view内view的fixed布局失效

uni-app scroll-view内view的fixed布局失效

开发环境 版本号 项目创建方式
Mac macOS Big Sur 11.6 HBuilderX

产品分类:uniapp/H5

浏览器平台:Chrome
浏览器版本:94.0.4606.61

App下载地址或H5网址:

[http://www.zxlee.cn/uni/index.html](http://www.zxlee.cn/uni/index.html)

示例代码:

<template>  
    <scroll-view class="scroll-view" scroll-y>  
        <view class="item" v-for="(item,index) in list" :key="index">{{item}}</view>  
        <view class="scroll-top">TOP</view>  
    </scroll-view>  
</template>  

<script>  
    export default {  
        data() {  
            return {  
                list: []  
            }  
        },  
        onLoad() {  
            for(let i = 0;i < 100;i++){  
                this.list.push(i);  
            }  
        },  
        methods: {  

        }  
    }  
</script>  

<style>  
    page{  
        height: 100%;  
    }  
    .scroll-view{  
        height: 100%;  
    }  
    .item{  
        padding: 50rpx 20rpx;  
        border-bottom: solid 1px #eeeeee;  
    }  
    .scroll-top{  
        position: fixed;  
        right: 30rpx;  
        bottom: 100rpx;  
        width: 100rpx;  
        height: 100rpx;  
        border-radius: 50%;  
        background-color: #00000088;  

        display: flex;  
        justify-content: center;  
        align-items: center;  
        font-size: 28rpx;  
        color: white;  
    }  
</style>  

操作步骤:

在scroll-view中添加滚动到顶部按钮,并设置position:fixed

预期结果:

滚动到顶部按钮可以固定在屏幕指定位置

实际结果:

由于uni-scroll-view-content设置了transform,导致scroll-view中view的fixed被降级为absolute,从而跟着scroll-view滚动

bug描述:

scroll-view中uni-scroll-view-content设置了style="transform: translateY(0px) translateZ(0px);"导致scroll-view内view的fixed布局失效。 希望在不需要设置transform时,设置style=“transform:none”

示例代码见下方附件

[uni-app-scrollview-report.zip](//ask.dcloud.net.cn/file/download/file_name-dW5pLWFwcC1zY3JvbGx2aWV3LXJlcG9ydC56aXA=__url-Ly9pbWctY2RuLXRjLmRjbG91ZC5uZXQuY24vdXBsb2Fkcy9xdWVzdGlvbnMvMjAyMTEwMjgvODMyMDMxZTY1YWUzM2VmZjg5ZDY2MWVjMWRhZWI5N2Q=)

更多关于uni-app scroll-view内view的fixed布局失效的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

HBuilderX 3.2.10 alpha 已修复 查看相关问题https://ask.dcloud.net.cn/question/132288

更多关于uni-app scroll-view内view的fixed布局失效的实战教程也可以访问 https://www.itying.com/category-93-b0.html


收到,谢谢

回到顶部