小程序---获取view的高度

在我们做小程序的时候, 难免会碰到需要将界面分成俩部分来展示上下俩个部分, 这时我们就需要计算上部分view框的高度, 好让下部分填满整个界面
一种方法是把上部分view的高度固定,单位用rpx .然后下部分高度就可以用微信提供的方法计算得出, 代码如下:

data: {
    scroll_height: 450, //初始滚屏的高度
  },

//页面加载
onLoad: function (options) {
    var that = this;
    wx.getSystemInfo({ //微信自身api
      success: function (res) {
        that.setData({
          scroll_height: res.windowHeight - 185 //此处是计算滚动屏的高度
        });
      }
    });

wxml代码为:

<scroll-view scroll-y style="height: {{scroll_height}}px;">
       .....
</scroll-view>

另外一种是我查阅相关文档 , 可以用 api来操作,并且动态获取:

//创建节点选择器
var item= wx.createSelectorQuery();
item.select('#tabs_height').boundingClientRect() //里面需要绑定 view组件的id
item.exec(function (res) { //res为绑定元素信息的数组
    let tabs_height = res.height; //这样可以动态获取高度
})

这里我使用的时候存在一个问题,就是 上面获取的高度好像是异步执行的 , 如果tabs_height 放在外面 赋值时,会有点问题, 获取不到高度值 , 如果有大神知道怎么解决, 还望请教一下.

  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值