<template>
<view>
<view class="demoWrapperNavTop">
吸顶容器
</view>
<view class="demoWrapperNavTopTwo" :class="{'positionBox':statusFixed}">我是浮动栏</view>
<view class="demoWrapperFooteer">
demoWrapperFooteer
</view>
</view>
</template>
<script>
export default {
data() {
return {
statusFixed:false,
oldHeight:uni.upx2px(500),
};
},
onLoad() {
console.log(uni.upx2px(500))
},
onBackPress(e) {
console.log(e)
},
onPageScroll(e) {
console.log(e.scrollTop+'====='+this.oldHeight)
if (this.oldHeight > e.scrollTop) {
this.statusFixed = false
} else {
this.statusFixed = true
}
},
};
</script>
<style lang='scss' scoped>
.demoWrapperNavTop {
width: 100%;
height: 500rpx;
background-color: #1AAD19;
}
.demoWrapperNavTopTwo {
width: 100%;
height: 100rpx;
background-color: pink;
}
.demoWrapperFooteer {
width: 100%;
height: 3000rpx;
background-color: #0081FF;
z-index: 999;
}
.positionBox {
position: fixed;
top: 0;
}
</style>
uniapp 吸顶容器
最新推荐文章于 2024-06-13 19:39:22 发布