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

最新推荐文章于 2025-09-10 09:56:31 发布

原创

最新推荐文章于 2025-09-10 09:56:31 发布 · 3.7k 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#uniapp #小程序

在uniApp和小程序项目中，为了模仿美团效果，需实现筛选模块滚动到顶部时置顶显示。通过查阅官方文档，利用相同API在页面加载时获取视图顶部高度并保存。监听滚动事件，当滚动超过该高度时，添加样式使视图固定在顶部。

最近在使用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.