精确计算微信小程序scrollview高度,全机型适配
众所周知,可以滑动的 scroll
组件在移动端非常的重要,几乎每个页面都要用到。
而小程序的 scroll-view
组件就比较坑了,非得指定一个高度才能正常使用。布局复杂的时候谁还给你算高度啊。。。
坑归坑,没办法,还是得用……既然官方要求必须传高度,那就想办法计算吧。
一、布局分析,推导公式
先给个示例图:
这是一个稍微复杂点的页面,最上面是两个 tab
标签,每个标签的页面是一个子组件。第二个子组件布局是上面一个标题,下面是 scroll-view
。
再画个解剖图吧……
页面分三部分,tab,title,scroll-view。不要忘了每个部分间还有 margin
, 这里设置的是每个 margin
都是 10px
。
所以要计算 scroll-view
的高度可以得出下面 公式:
scroll-view 的高度 = 页面可用高度 - tab高度 - title高度 - 10 - 10
复制代码
为什么减两个 10
呢?上面说了 10
是 margin
的距离,tab
与 title
有 10px
的margin
,title
与 scroll-view
也有 10px
的 margin
。
需要注意的是计算用的单位都是 px
,不是小程序的 rpx
。因为下面调用接口获取可用屏幕高度时得到的就是 px
。
二、计算变量的高度
2.1 计算单个节点高度
上面的公式中的变量有:页面可用高度, title
的高度,tab
的高度。
这里需要计算的就是 页面可用高度 和 title
的高度,因为为了简单 tab
的高度是写死的 50px
, 当然不写死也没关系,在父组件中计算 tab
的高度传给子组件就好。
下面正式开始计算
//计算 scroll-view 的高度
computeScrollViewHeight() {
let that = this
let query = wx.createSelectorQuery().in(this)
query.select('.title').boundingClientRect(function(res) {
//得到标题的高度
let titleHeight = res.height
//scroll-view的高度 = 屏幕高度- tab高(50) - 10 - 10 - titleHeight
//获取屏幕可用高度
let screenHeight = wx.getSystemInfoSync().windowHeight
//计算 scroll-view 的高度
let scrollHeight = screenHeight - titleHeight - 70
that.setData({
scrollHeight: scrollHeight
})
}).exec()
},
复制代码
这里主要是通过小程序封装的 API 来计算的。
wx.getSystemInfoSync()
可以得到设备的各种信息,关于高度的参数有两个,一个是屏幕高度 screenHeight
,一个是可使用窗口高度 windowHeight
。注意计算的时候要用 windowHeight
,这样算出来的高度才是对的。screenHeight
是手机的屏幕高度,包含了手机的状态栏和小程序标题栏。
有了可用屏幕高度,还需要元素的高度。计算元素高度小程序也提供了 API,参见 WXML节点信息API。
具体用法看文档就好了,精简的使用步骤就是:
let query = wx.createSelectorQuery().in(this)
query.select('.title').boundingClientRect(function(res) {
//在这里做计算,res里有需要的数据
}).exec()
复制代码
注意在组件 component
里使用的话,要用 wx.createSelectorQuery().in(this)
,将选择器的选取范围更改为自定义组件component内。(初始时,选择器仅选取页面范围的节点,不会选取任何自定义组件中的节点。)
如果想同时测量多个节点的高度呢?
2.2 计算多个节点高度
能计算单个当然也能同时计算多个。如下:
computeScrollViewHeight() {
let that = this
let query = wx.createSelectorQuery().in(this)
query.select('.search').boundingClientRect()
query.select('.title-wrapper').boundingClientRect()
query.exec(res => {
let searchHeight = res[0].height
let titleHeight = res[1].height
let windowHeight = wx.getSystemInfoSync().windowHeight
let scrollHeight = windowHeight - searchHeight - titleHeight - 30 - 5 - 50
this.setData({ scrollHeight: scrollHeight})
})
},
复制代码
有几个节点就写几个 query.select('.search').boundingClientRect()
, 然后调用 query.exec()
执行操作获取节点信息的数组。
注意: 调用封装好的 computeScrollViewHeight()
的时机是在生命周期函数的 ready()
中,不能在 created()
,否则取不到数据。
参见 Component构造器
三、在 wxml 使用计算的结果
计算完成后如何使用呢?
<scroll-view scroll-y style='height: {{scrollHeight + "px"}}'></<scroll-view>
复制代码
通过上面的方法使用。
注意:一定要在变量后面加上单位 px
,不加的话会出错。
以上就是精确计算微信小程序scrollview高度的方法,从此再也不担心 scroll-view
高度错乱了!
精确计算微信小程序scrollview高度,全机型适配的更多相关文章
- 微信小程序 scroll-view 填满剩余可用高度
根据微信小程序 scroll-view 文档所述,scroll-view必须给定一个固定高度.那么如果我们想要让它自动填充剩余高度,该怎么办呢? 前言 在说出我的解决方案之前,先来看一下我的页面设计, ...
- 微信小程序商城构建全栈应用 Thinkphp5
课程——微信小程序商城构建全栈应用[目录]第1章 前言:不同的时代,不同的Web第2章 环境,工具与准备工作第3章 模块,路由与获取请求参数第4章 构建验证层第5章 REST与RESTFul第6章 A ...
- 微信小程序中的iPhone X适配问题
微信小程序中的iPhone X适配问题 小程序中下方的导航会被iPhone X下面的那条黑线盖住[微笑脸],所以要专门为了iPhone X做样式上的适配[微笑脸] wx.getSystemInfo({ ...
- 微信小程序scroll-view滚动一次多次触发的问题解决方案
最近使用微信小程序开发的时候,需要用scroll-view的bindscrolltolower事件,控制加载下一页的内容.但是发现在ios里,下拉滚动一次,事件触发两次,导致重复加载数据. 经过百度和 ...
- 微信小程序 scroll-view 实现锚点跳转
在微信小程序中,使用 scroll-view 实现长页面的标记跳转,官方文档中没有例子演示,锚点标记主要是使用<scroll-view> 的 scroll-into-view 属性. 实现 ...
- ios下,微信小程序scrollview组件中的fixed元素抖得和帕金森病人一样
问题现象 这个问题是最近在优化小程序代码时发现的. 在ios环境下,微信小程序的scrollview组件包裹着一个position:fixed的view. 当在scrollview组件上滑动时,这个v ...
- 微信小程序scroll-view
使用竖向滚动时,需要给<scroll-view/>一个固定高度,通过 WXSS 设置 height.以下列举一个示例: scroll-top的优先级要高于scroll-into-view的 ...
- 微信小程序swiper高度自适应,swiper的子元素高度不固定
小程序 swiper 组件默认高度150px,并且如果子元素过高,swiper不会自适应高度 解决方案一: (总体来说不够完美,适合满屏滑动) 如果不是满屏的状态,用scroll-view IOS滑动 ...
- 微信小程序 scroll-view 完成上拉加载更多
我们经常在软件客户端上看到这么一个功能,当我们阅读信息浏览到文章的末尾时,通常会加载出更多的信息.比如,我们在简书客户端上浏览推荐文章时,浏览到屏幕的末尾,此时又加载出了另一页的推荐文章,即实现了上拉 ...
随机推荐
- Java第三十天,I/O操作
一.基本概念 输入输出一般是相对与内存.CPU寄存器.当前进程来说的 输入:从硬盘.键盘等外部设备读取数据到内存.当前进程或CPU寄存器中 输出:利用当前进程将数据写入到硬盘.终端显示屏等外部设备中 ...
- Tcl编程第一天,helloworld
#!/usr/bin/tclsh puts "hello world" 注意:第一行代码表示的是tcl程序运行所需要的文件位置 puts函数代表输出
- VMware 15.5虚拟机安装群晖NAS
一.群晖nas简介 NAS(Network Attached Storage:网络附属存储),按字面意思理解其实就是网络存储器,可以理解为存储资料的网盘,云盘.NAS本身支持多种协议(如NFS.CI ...
- mount --bind绑定命令
将目录或文件DirFile-1绑定到目录或文件DirFile-2上,所有对DirFile-2的访问就是对DirFile-1的访问 mount --bind [DirFile-1] [DirFile-2 ...
- ConcurrentHashMap和 CopyOnWriteArrayList提供线程安全性和可伸缩性 以及 同步的集合类 Hashtable 和 Vector Collections.synchronizedMap 和 Collections.synchronizedList 区别缺点
ConcurrentHashMap和 CopyOnWriteArrayList提供线程安全性和可伸缩性 DougLea的 util.concurrent 包除了包含许多其他有用的并发构造块之外,还包含 ...
- Q - QQpet exploratory park HDU - 1493 (概率DP)
题目大意: 一共有61个位置,标记为0~60.其中有10个重要位置,分别为:5, 12, 22, 29, 33, 38, 42, 46, 50 and 55. 有一个筛子,一共6个面,标有1~6.摇到 ...
- 在数组添加元素时报错:IndexError: list index out of range
今天第一次发随笔还有许多不足之处,欢迎评论!!! 最近在写一个成语接龙的小游戏,结果在数组添加元素时报错:IndexError: list index out of range 源码: import ...
- 文本文件的合并操作方法 - Python
我们有时候,看到几k的日志文件,一大堆,一个一个打开又很麻烦,少看几个,又担心遗漏,这个时候,如果有一个可以合并所有文本文件的工具就好了. 下面这个代码就可以实现,它不局限于.txt格式,基本上字符型 ...
- mongo基础
以下如有任何问题,直接到官方操作文档左上角搜索框搜索 安装 On Windows, this path is on the drive from which you start MongoDB. Fo ...
- DeepinV20系统文件管理器右键发送至为知笔记
1. 创作背景 昨天在深度系统上做了一个打开文件管理器选择文件右键发送文本至博客园的插件. 这个插件对于我自己来说是及其方便的东西,平时的学习积累,工作经验或者生活感悟,随手记下之后,就能够轻松发送出 ...