微信小程序 scroll-view 填满剩余可用高度
2023-09-11 14:19:38 时间
根据微信小程序 scroll-view 文档所述,scroll-view
必须给定一个固定高度。那么如果我们想要让它自动填充剩余高度,该怎么办呢?
前言
在说出我的解决方案之前,先来看一下我的页面设计,以便于理解。
我将这个页面分成了三部分:最顶部的导航栏navbar
,用于显示概要信息的header
,以及本文的主角scroll-view
。可见,scroll-view
位于页面的最下方,如果我直接给它设定一个固定的高度,那么在不同尺寸的屏幕上,就可能会有高度过小而在下方留白,或者高度过大超出屏幕下边界的可能。那么,自动计算scroll-view
的高度,看起来是一个可行的办法。
思路有了,接下来就开始挑趁手的工具吧!
需要的 API
首先,在计算过程中,整个页面的高度是必须要有的。而小程序的 wx.getSystemInfo API 正好可以提供这样的功能。
其次,我们还得想办法拿到scroll-view
上面各个组件的高度。小程序虽然没有 DOM 操作,但也提供 WXML 节点信息的 API。
简洁起见,我只会写出相关的代码,其余的代码我将直接略掉。
Page({ data: { // 页面总高度将会放在这里 windowHeight: 0, // navbar的高度 navbarHeight: 0, // header的高度 headerHeight: 0, // scroll-view的高度 scrollViewHeight: 0 }, onLoad: function(option) { // 先取出页面高度 windowHeight wx.getSystemInfo({ success: function(res) { that.setData({ windowHeight: res.windowHeight }); } }); // 然后取出navbar和header的高度 // 根据文档,先创建一个SelectorQuery对象实例 let query = wx.createSelectorQuery().in(this); // 然后逐个取出navbar和header的节点信息 // 选择器的语法与jQuery语法相同 query.select('#navbar').boundingClientRect(); query.select('#header').boundingClientRect(); // 执行上面所指定的请求,结果会按照顺序存放于一个数组中,在callback的第一个参数中返回 query.exec((res) => { // 分别取出navbar和header的高度 let navbarHeight = res[0].height; let headerHeight = res[1].height; // 然后就是做个减法 let scrollViewHeight = this.data.windowHeight - navbarHeight - headerHeight; // 算出来之后存到data对象里面 this.setData({ scrollViewHeight: scrollViewHeight }); }); } })
至于 WXML 里面,就还是使用双大括号来将data
部分的scrollViewHeight
的值绑定到height
属性上面就是了。
需要注意的是,上面计算出来的值,单位是px
而不是rpx
。
<scroll-view style="height: {{scrollViewHeight}}px" scroll-y="true"> <!-- scroll-view里面的内容 --> </scroll-view>
转:https://blog.csdn.net/QFire/article/details/84558515
相关文章
- Slog71_选取、上传和显示本地图片GET !(微信小程序之云开发-全栈时代3)
- 微信小程序_(表单组件)button组件的使用
- 微信小程序_简单组件使用与数据绑定
- 坑爹的微信支付v3,其实没有那么坑
- 微信小程序开发(二)创建一个小程序页面
- 微信小程序遇到的问题与解决
- 【问题解决方案】电脑使用微信等第三方工具给鼠标右键和下拉列表截图
- 微信第三方登录接口
- 微信小程序怎么获取page/index/main后面的参数
- 亲历H5移动端游戏微信支付接入及那些坑(二)——获取Openid和授权
- uni-app:运行到微信小程序模拟器(hbuilderx 3.6.18)
- 微信JS SDK Demo
- 微信小程序----App生命周期
- 微信小程序开发系列 (三) :微信小程序如何响应用户点击事件和微信平台 API 的使用方法介绍
- atitit. access token是什么??微信平台公众号开发access_token and Web session保持状态机制
- Java Web项目,Android和微信小程序的初始页面配置
- 微信公众号支付/微信内置浏览器微信h5支付报错:当前页面的URL未注册:https:∥xxxxxx!解决方法一看就会
- 微信小程序获取头像和昵称等个人信息wx.getUserProfile(Object object)
- 微信小程序获取用户openId
- 美客分销商城-接力购源码系统,全开源代码可进行二次开发,微信小程序分销商城
- Appium基础 — 操作微信小程序
- 【小程序】微信小程序开发流程
- 微信小程序基本语法介绍
- 【微信小程序项目实战】TodoList-环境配置(1)