android开发分享uniApp / 小程序实现一个view滚动到一定高度置顶显示

最近在使用uniApp做一个模仿美团小程序的demo，其中遇到这样一个需求，就是筛选模块滚动到顶部就置顶显示

查阅了uniApp的官方文档以及微信小程序的官方文档，发现都有一个相同的API,如下：

实现思路如下：

1.在onLoad或mounted页面初始化的生命周期方法中获取需要置顶的view距离顶部的高度保存到data中

 onLoad() { 	// 监听筛选组件距离顶部的距离 	const query = wx.createSelectorQuery() 	query.select('#boxFixed').boundingClientRect() 	query.exec((res)=>{ 				 		this.topRange = res[0].top //获取距离顶部的高度并保存 				 	}) },

2.监听页面滚动，当滚动的距离大于上述距离顶部距离则增加一个固定在顶部的样式

 // 监听页面滚动距离 onPageScroll(e) { 	this.scrollSize = e.scrollTop }   computed:{ 	// 监听筛选组件置顶和不置顶 	openFixed(){ 		// 如果页面滚动的高度大于筛选组件距离顶部的高度，那就置顶，反之不置顶 		if(this.scrollSize > this.topRange){ 			console.log('置顶') 			this.isfixed = true 		}else{ 			console.log('不置顶') 			this.isfixed = false 		} 	} }  //当上述isFixed为true的时候需要置顶的view会增加一个样式，使用 position = fixed 脱离文档流 //设置top = 0 即可完成置顶