<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>
照相
- 发布：2021-10-28 10:27
- 更新：2021-10-28 11:52
- 阅读：1622
产品分类： uniapp/H5
PC开发环境操作系统： Mac
PC开发环境操作系统版本号： macOS Big Sur 11.6
HBuilderX类型： 正式
HBuilderX版本号： 3.2.9
浏览器平台： Chrome
浏览器版本： 94.0.4606.61
项目创建方式： HBuilderX
App下载地址或H5⽹址： http://www.zxlee.cn/uni/index.html
示例代码：
操作步骤：
在scroll-view中添加滚动到顶部按钮，并设置position:fixed
在scroll-view中添加滚动到顶部按钮，并设置position:fixed
预期结果：
滚动到顶部按钮可以固定在屏幕指定位置
滚动到顶部按钮可以固定在屏幕指定位置
实际结果：
由于uni-scroll-view-content设置了transform，导致scroll-view中view的fixed被降级为absolute，从而跟着scroll-view滚动
由于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"
示例代码见下方附件
照相 (作者)
收到，谢谢
2021-11-01 20:42