Uniapp或者微信小程序如何动态的计算Scrollview的高度

当一个小程序页面,顶部有搜索栏,或者分类查询时,我们想要保证它们能固定到顶部,就需要使用到Scrollview,那么如何确定Scrollview就是一个问题,这时我们可以使用以下代码来实现

javascript 复制代码
setScrollHeight(view = '#scrollView', name = 'scrollHeight') {
	let that = this
	uni.getSystemInfo({
		success: function(res) {
			const query = uni.createSelectorQuery().in(that).select(view);
			query.boundingClientRect(data => {
				that[name] = res.windowHeight - data.top
			}).exec();
		}
	});
},

先获取Scrollview距离顶部的高度,然后页面高度减去顶部距离,就能得到剩余的内容高度,如果底部还有操作条,那么我们再减去其高度,就能得到具体的Scrollview高度了

注意点是为了能准确的获取到页面元素,从而准确计算高度,我们需要将代码放到onReady生命周期里运行

javascript 复制代码
onReady() {
	this.setScrollHeight()
},
相关推荐
正小安2 小时前
如何在微信小程序中实现分包加载和预下载
前端·微信小程序·小程序
说私域2 小时前
基于定制开发与2+1链动模式的商城小程序搭建策略
大数据·小程序
二十雨辰5 小时前
[uni-app]小兔鲜-07订单+支付
uni-app
丁总学Java8 小时前
微信小程序-npm支持-如何使用npm包
前端·微信小程序·npm·node.js
工业互联网专业10 小时前
毕业设计选题:基于ssm+vue+uniapp的校园水电费管理小程序
vue.js·小程序·uni-app·毕业设计·ssm·源码·课程设计
说私域13 小时前
社群团购中的用户黏性价值:以开源小程序多商户AI智能名片商城源码为例
人工智能·小程序
以对_17 小时前
uview表单校验不生效问题
前端·uni-app
迷雾yx17 小时前
开发微信小程序 基础02
微信小程序·小程序
迷雾yx17 小时前
开发微信小程序 基础03
微信小程序·小程序
说私域18 小时前
地理定位营销与开源AI智能名片O2O商城小程序的融合与发展
人工智能·小程序