uniapp吸顶功能实现

一、vue页面代码实现

<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)
},
//监测页面滑动
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;
}

到这里吸顶的功能就能实现了，重要的是一定要找准要吸顶的位置