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()
},
相关推荐
vx_dmxq21120 小时前
【PHP考研互助系统】(免费领源码+演示录像)|可做计算机毕设Java、Python、PHP、小程序APP、C#、爬虫大数据、单片机、文案
java·spring boot·mysql·考研·微信小程序·小程序·php
蹦极的考拉20 小时前
夜间无法登录:ThinkPHP api接口 23:00 准时罢工的排查全纪录
小程序·thinkphp·api接口·无法登陆
vx_vxbs661 天前
【SSM电影网站】(免费领源码+演示录像)|可做计算机毕设Java、Python、PHP、小程序APP、C#、爬虫大数据、单片机、文案
java·spring boot·python·mysql·小程序·php·idea
我命由我123451 天前
微信开发者工具 - 模拟器分离窗口与关闭分离窗口
前端·javascript·学习·微信小程序·前端框架·html·js
G佳伟1 天前
‌微信小程序Webview转发页面空白问题解决方案‌
微信小程序·小程序
vx_vxbs661 天前
【SSM电动车智能充电服务平台】(免费领源码+演示录像)|可做计算机毕设Java、Python、PHP、小程序APP、C#、爬虫大数据、单片机、文案
java·spring boot·mysql·spring cloud·小程序·php·idea
小皮虾1 天前
告别服务器!小程序纯前端“图片转 PDF”工具,隐私安全又高效
前端·javascript·微信小程序
低代码布道师1 天前
医疗小程序12出诊列表
低代码·小程序
Coder-coco1 天前
游戏助手|游戏攻略|基于SprinBoot+vue的游戏攻略系统小程序(源码+数据库+文档)
java·vue.js·spring boot·游戏·小程序·论文·游戏助手
小小王app小程序开发2 天前
盲盒小程序一番赏衍生玩法:魔王赏、非酋赏、狂欢赏差异化分析
小程序