微信小程序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
    })
  }
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容