微信小程序view动态长度_[微信小程序]通过计算其他view的高度，动态给定scroll-view的高度...

WXML节点信息API

微信小程序的开发文档有个很重要的api

wx.createSelectorQuery()

具体大家还是看一下文档，我下面是直接上代码解说；

案例中的布局

这里页面上部分有三个view，它们的class分别是.kill-order、.bannerType、.search；

然后接下来的是一个class=content的scroll-view

下面直接贴代码给你们瞧瞧：

wxml

销核订单

全部订单

未销核

已销核

退款

{{item.orderName}}

用户微信昵称：{{item.wxNickname}}

订单号：{{item.orderNum}}

下单时间：{{item.createTime}}

未付款

未销核

已销核

退款

价格：{{item.orderPrice}}元

在这里的话，实例中页面上面部分的三个view(.kill-order、.bannerType、.search)，在设计稿中都是有固定的高度，但是用了微信小程序里面的rpx单位进行自动适配不同机型的尺寸；页面底下的scroll-view的高度，却是动态的，但是在小程序里面，我们需要给它一个固定高度，怎么办呢？

这里的话，我使用最蠢的办法，使用api，wx.createSelectorQuery()分别获取三个view(.kill-order、.bannerType、.search)的高度并求和(useHeith)，再使用wx.getSystemInfo()获取windowHeight(可使用窗口高度，文档地址wx.getSystemInfo(OBJECT))，最后得出scroll-view的高度(windowHeight - useHeith)，然后通过数据绑定的方式，给scroll-view指定高度px；

下面是js代码(代码写的有点恶心，因为是异步的)

//search-view高度计算

let qSearch = wx.createSelectorQuery();

qSearch.select('.search').boundingClientRect()

qSearch.exec(function (res) {

that.setData({

useHeith: that.data.useHeith + res[0].height

})

// killorder-view高度

let qKillOrder = wx.createSelectorQuery();

qKillOrder.select('.kill-order').boundingClientRect()

let result = qKillOrder.exec(function (resk) {

that.setData({

useHeith: that.data.useHeith + resk[0].height

})

// bannerType-view高度

let qBannerType = wx.createSelectorQuery();

qBannerType.select('.bannerType').boundingClientRect()

qBannerType.exec(function (resb) {

that.setData({

useHeith: that.data.useHeith + resb[0].height

})

wx.getSystemInfo({

success: function (res) {

that.setData({

canUseWidth: res.windowWidth,

canUseHeith: res.windowHeight,

scrollViewHeith: res.windowHeight - that.data.useHeith

})

},

})

})

})

})//这一串都是为了设置scrollview高度

效果

效果还行