欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  移动技术

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

程序员文章站 2022-08-03 11:55:45
最近在使用uniApp做一个模仿美团小程序的demo,其中遇到这样一个需求,就是筛选模块滚动到顶部就置顶显示查阅了uniApp的官方文档以及微信小程序的官方文档,发现都有一个相同的API,如下:实现思路如下:1.在onLoad或mounted页面初始化的生命周期方法中获取需要置顶的view距离顶部的高度保存到data中onLoad() {// 监听筛选组件距离顶部的距离const query = wx.createSelectorQuery()query.select....

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

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

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

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

实现思路如下:

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 即可完成置顶

 

 

本文地址:https://blog.csdn.net/C_zhihao/article/details/107116723