微信小程序计算scroll-view的高度
来源:互联网 发布:淘宝产品关键词优化 编辑:程序博客网 时间:2024/05/21 09:02
在小程序里面如果用到scroll-view,就会看到这样一句话
使用竖向滚动时,需要给<scroll-view/>
一个固定高度,通过 WXSS 设置 height。
这是官方给出的文档,所以我们通常的做法这样的
<scroll-view scroll-y="true" style="height:{{scrollHeight}}px;">
在wxml文件里面定义高度,然后通过
wx.getSystemInfo({ success: function (res) { console.info(res.windowHeight); that.setData({ scrollHeight: res.windowHeight }); } });这个不是我今天要说的,我今天要说的是如果有头部怎么办?如何把头部的高度获取出来,并减掉头部的距离:
wx.createSelectorQuery().select('#the-id').boundingClientRect(function(rect){ rect.id // 节点的ID rect.dataset // 节点的dataset rect.left // 节点的左边界坐标 rect.right // 节点的右边界坐标 rect.top // 节点的上边界坐标 rect.bottom // 节点的下边界坐标 rect.width // 节点的宽度 rect.height // 节点的高度 }).exec()
官方有这样一个api,然后把代码改成这样
wx.getSystemInfo({ success: function (res) { console.info(res.windowHeight); let height = res.windowHeight; wx.createSelectorQuery().selectAll('.search-bar').boundingClientRect(function (rects) { rects.forEach(function (rect) { that.setData({ scrollHeight: res.windowHeight - rect.bottom }); }) }).exec(); } });标红的地方是那个节点的class名字。
就到这。
阅读全文
0 0
- 微信小程序计算scroll-view的高度
- 微信小程序scroll-view高度设置及scroll-into-view的使用跳转
- List View和ScrollView冲突的解决以及List View在Scroll View中计算高度
- 微信小程序 scroll-view
- 微信小程序的视图容器-- scroll-view
- 微信小程序之scroll-view
- 微信小程序之scroll-view
- 关于微信小程序的scroll-view的使用
- 微信小程序scroll-view bindscrolltoupper & bindscrolltolower不响应的问题
- 微信小程序学习---view-scroll的使用注意事项
- 小程序中scroll-view的使用
- 【微信小程序】视图容器-scroll-view组件
- 微信小程序 scroll-view下拉刷新
- 微信小程序 scroll-view横向滚动 坑
- 微信小程序----组件之scroll-view
- 小程序 scroll-view
- 小程序scroll-view示例
- 微信小程序实现页面内的跳转——scroll-view
- 天气api
- 【想要谈一段真正的爱情,现在开始…
- 【如果你自认为是个现代女性,那就…
- 手写JDBC,java连接oracle数据库
- 【我是不及格的母亲】谢妈的女儿先…
- 微信小程序计算scroll-view的高度
- 【除了赚钱以及面子之外 你还…
- Java防止重复数据多次调用接口导致数据库插入重复记录
- 【给孩子他真正需要的「爱」】无庸…
- 【父母必看!教养不该只有一种SOP…
- 【诈骗集团经典对话法则:「倾听7…
- 【幼儿教育,家长的觉醒》一位学龄…
- 【千万不要光在微信里谈恋爱】谈恋…
- 【只会打嘴炮的男人,不可能爱你】…