微信小程序scroll-view动态获取高度

一、把子元素的高度赋给scroll-view

先说一下两个知识点：wx.getSystemInfo()、wx.createSelectorQuery()

wx.getSystemInfo()

1552613741(1).jpg

  //创建节点选择器
  wx.createSelectorQuery()
  //获取子节点信息
  select(‘节点名’).boundingClientRect() 

  //wxml
  <scroll-view scroll-y style="height: {{height?height+'px':'auto'}}">
        <view class='wwww' id='www'>
            <view>111</view>
            <view>111</view>
            <view>111</view>
            <view>111</view>
        </view>
  </scroll-view>

  //wxss
  .wwww view{
      height: 200rpx;
      background: wheat
  }

  //js
  //生命周期函数--监听页面加载
  onLoad: function(options) {
     var that=this;
     wx.getSystemInfo({
        success: function (res) {
           wx.createSelectorQuery().select('#www').boundingClientRect(function (rect) {
              var is_1_height = Number(rect.height) // 节点的宽度
                that.setData({
                   height: is_1_height
                });
            }).exec();
        }
    });
  }

二、自适应不同高度的手机

onLoad: function (options) {
    let windowHeight = wx.getSystemInfoSync().windowHeight // 屏幕的高度
    let windowWidth = wx.getSystemInfoSync().windowWidth // 屏幕的宽度
    this.setData({
      height: windowHeight * 750 / windowWidth - (本页面除了scroll以外其他组件的高度rpx) - 30
    })
  }