<template>
<view class="about">
<view class="lis">
<view class="li" v-for="(item,index) in 100" :key="index">
{{index}}
</view>
</view>
<!-- :style="{top:topHeight+'upx'}" -->
<view :class="[(isFixedTop) ? 'fixedTop' : '']" id="box" class="box">
吸顶导航
</view>
<view class="lis">
<view class="li" v-for="(item,index) in 50" :key="index">
{{index}}
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
isFixedTop:false,
Topdistance:3000,
topHeight:"",
}
},
onLoad() {
uni.pageScrollTo({
scrollTop:0,
duration:0
})
setTimeout(()=>{
this.GetTop()
// this.aaa()
},1000)
},
onPageScroll(e) {
console.log(e.scrollTop)
if(e.scrollTop > this.Topdistance){
this.isFixedTop=true
}else{
this.isFixedTop=false
}
},
methods: {
aaa(){
uni.createSelectorQuery().in(this).select('.uni-page-head').boundingClientRect(result => {
if (result) {
this.topHeight=result.height * 2
console.log(this.topHeight)
}else {
}
}).exec();
},
GetTop(){
//获取元素距离顶部的距离
var _this=this
uni.getSystemInfo({
success:(resu)=>{
console.log(resu)
const query = uni.createSelectorQuery()
query.select('#box').boundingClientRect()
query.selectViewport().scrollOffset()
query.exec(function(res){
_this.Topdistance=res[0].top
console.log(res)
})
},
fail:(res)=>{}
})
},
}
}
</script>
<style>
.li{
height: 100upx;
line-height: 100upx;
margin-top: 20upx;
text-align: center;
color: #FFFFFF;
}
.lis :nth-child(3n+1){
opacity: 0.1;
background-color: #f00;
}
.lis :nth-child(3n+2){
opacity: 0.1;
background-color: #0f0;
}
.lis :nth-child(3n+3){
opacity: 0.1;
background-color: #00f;
}
.box{
height: 100upx;
line-height: 100upx;
text-align: center;
background-color: #f0f;
color: #fff;
}
.fixedTop{
position: fixed;
top:0;
left: 0;
right: 0;
z-index: 9999999;
}
</style>