- 发布：2021-09-29 16:22
- 更新：2021-10-26 10:42
- 阅读：502
产品分类： uniapp/App
PC开发环境操作系统： Windows
PC开发环境操作系统版本号： Windows 10 家庭中文版 20H2
HBuilderX类型： 正式
HBuilderX版本号： 3.2.9
手机系统： 全部
手机厂商： 华为
页面类型： vue
打包方式： 云端
项目创建方式： HBuilderX
测试过的手机：
示例代码：
<template>
<scroll-view class="content_test" :scroll-y="true" @scroll="pageScroll">
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<div :class="['point',isFloat?'fixed':'relative']">点</div>
<p v-for="(item,index) of 200" :key="index">{{isFloat}}</p>
<p>2</p>
</scroll-view>
</template>
<script>
export default {
data() {
return {
isFloat: false
}
},
methods: {
//监听页面滚动条移动
pageScroll(e) {
// console.log("e.detail.scrollTop",e.detail.scrollTop);
if (e.detail.scrollTop >= 60) {
this.isFloat = true;
} else {
this.isFloat = false;
}
console.log(this.isFloat);
}
}
}
</script>
<style scoped>
.content_test {
width: 100%;
height: 600rpx;
box-sizing: border-box;
}
.point {
background-color: red;
color: white;
}
.fixed {
position: fixed;
left: 0;
top: 0px;
}
.relative {
position: static;
}
p {
height: 10px;
line-height: 10px;
width: 100%;
color: white;
background: green;
}
</style>
<template>
<scroll-view class="content_test" :scroll-y="true" @scroll="pageScroll">
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<div :class="['point',isFloat?'fixed':'relative']">点</div>
<p v-for="(item,index) of 200" :key="index">{{isFloat}}</p>
<p>2</p>
</scroll-view>
</template>
<script>
export default {
data() {
return {
isFloat: false
}
},
methods: {
//监听页面滚动条移动
pageScroll(e) {
// console.log("e.detail.scrollTop",e.detail.scrollTop);
if (e.detail.scrollTop >= 60) {
this.isFloat = true;
} else {
this.isFloat = false;
}
console.log(this.isFloat);
}
}
}
</script>
<style scoped>
.content_test {
width: 100%;
height: 600rpx;
box-sizing: border-box;
}
.point {
background-color: red;
color: white;
}
.fixed {
position: fixed;
left: 0;
top: 0px;
}
.relative {
position: static;
}
p {
height: 10px;
line-height: 10px;
width: 100%;
color: white;
background: green;
}
</style>操作步骤：
创建一个新页面，将代码，copy到新页面中
创建一个新页面，将代码，copy到新页面中
预期结果：
scroll-view是父标签，scroll-view标签里有个position:fixed的定位的子元素，scroll-view页面滚动时，position:fixed的子元素不跟着滚动
scroll-view是父标签，scroll-view标签里有个position:fixed的定位的子元素，scroll-view页面滚动时，position:fixed的子元素不跟着滚动
实际结果：
scroll-view是父标签，scroll-view标签里有个position:fixed的定位的子元素，scroll-view页面滚动时，position:fixed的子元素跟着滚动
scroll-view是父标签，scroll-view标签里有个position:fixed的定位的子元素，scroll-view页面滚动时，position:fixed的子元素跟着滚动
bug描述：
scroll-view是父标签，scroll-view标签里有个position:fixed的定位的子元素，scroll-view页面滚动时，position:fixed的子元素跟着滚动。app上有这个问题，小程序没事
1 个回复
zipe
https://ask.dcloud.net.cn/question/132288 官方回复的HBuilderX 3.2.10 alpha 已修复这个问题