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
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
收到,谢谢

