一规哲、vue頁(yè)面代碼實(shí)現(xiàn)
<view :class="[(isFixedTop) ? 'fixedTop' : '']" id="box" class="box bgwhite">
<view class="m-lr-30 row just-btw p-tb-30">
<view class="row alignitems">
<image src="../../static/quanbu_icon.png" mode="aspectFit" style="width:40rpx;height:40rpx;"></image>
<view class="f30 weight500 m-l-20">全部品牌</view>
</view>
<!-- <image src="../../static/search_icon.png" mode="aspectFit" style="width:38rpx;height:35rpx;"></image> -->
</view>
</view>
二、js處理
data(){
return{
isFixedTop:false,
}
},
onLoad(){
uni.pageScrollTo({
scrollTop:0,
duration:0
})
setTimeout(()=>{
this.GetTop()
// this.aaa()
},1000)
},
//監(jiān)測(cè)頁(yè)面滑動(dòng)
onPageScroll(e) {
if(e.scrollTop > this.Topdistance){
this.isFixedTop = true
}else{
this.isFixedTop = false
}
},
methods:{
GetTop(){
// 獲取元素距離頂部的距離
var _this=this
uni.getSystemInfo({
success:(resu)=>{
const query = uni.createSelectorQuery()
query.select('#box').boundingClientRect()
query.selectViewport().scrollOffset()
query.exec(function(res){
_this.Topdistance=res[0].top
})
},
fail:(res)=>{}
})
},
}
三、css
.fixedTop{
position: fixed;
width:100%;
top:0;
left: 0;
z-index: 999;
}
到這里吸頂?shù)墓δ芫湍軐?shí)現(xiàn)了谣蠢，重要的是一定要找準(zhǔn)要吸頂?shù)奈恢?/p>
