1、利用微信提供的wx.createSelectorQuery()方法实现
2、实现代码:
.wxml
<swiper style="height: {{clientHeight}};" circular="true" duration="500" bindanimationfinish="swiperChange">
<block wx:for="{{deviceList}}" wx:key="index" >
<swiper-item >
<scroll-view scroll-y="{{true}}" >
<view id="item-height" class="tui-flexs tui-align-between item-row">
<view id="col-width" class="tui-center tui-col-1 "><tui-icon name="arrowleft" size="15" data-id="{{item.id}}" ></tui-icon></view>
<view wx:if="{{deviceType == 1}}" class="tui-center tui-col-22 ">{{item.dName}}</view>
<view wx:if="{{deviceType == 2}}" class="tui-center tui-col-22 ">{{deviceDetail.dName}}</view>
<view class="tui-center tui-col-1 "><tui-icon name="arrowright" size="15" data-id="{{item.id}}"></tui-icon></view>
</view>
<view id="tui-flex-box" class="tui-flex-box">
<view class="tui-flex">
<view class="tui-center tui-light-blue tui-col-4">
<view>{{harmonicElectricityList == null?'暂无':harmonicElectricityList}}%</view>
<view>测试</view>
</view>
<view class="tui-center tui-light-blue tui-col-4">
<view>{{harmonicVoltageList == null?'暂无':harmonicVoltageList}}%</view>
<view>测试</view>
</view>
<view class="tui-center tui-light-blue tui-col-4">
<view>{{maxDeviceDetail.maxDay == null?'暂无':maxDeviceDetail.maxDay}}kW</view>
<view>本日最高</view>
</view>
<view class="tui-center tui-light-blue tui-col-4">
<view>{{maxDeviceDetail.maxMonth == null?'暂无':maxDeviceDetail.maxMonth}}kW</view>
<view>本月最高</view>
</view>
</view>
</view>
<tui-grid id="tui-grid">
<tui-grid-item cell="2" bgcolor="#ECF6FD" >
<view class="tui-grid-icon">
<text class="tui-grid-item-name">测试</text>
</view>
<block wx:for-items="{{voltageList}}" wx:key="paramNo">
<text class="tui-grid-label">{{item.psName}}<text decode="{{true}}" space="{{true}}"> </text>{{item.data}}V</text>
</block>
<text class="tui-grid-label"><text decode="{{true}}" space="{{true}}"> </text></text>
</tui-grid-item>
<tui-grid-item cell="2" bgcolor="#ECF6FD">
<view class="tui-grid-icon">
<text class="tui-grid-item-name">测试</text>
</view>
<block wx:for-items="{{electricityList}}" wx:key="paramNo">
<text class="tui-grid-label">{{item.psName}}<text decode="{{true}}" space="{{true}}"> </text>{{item.data}}A</text>
</block>
<text class="tui-grid-label"><text decode="{{true}}" space="{{true}}"> </text></text>
</tui-grid-item>
<tui-grid-item cell="2" bgcolor="#ECF6FD" >
<view class="tui-grid-icon">
<text class="tui-grid-item-name">测试</text>
</view>
<block wx:for-items="{{powerFactorList}}" wx:key="paramNo">
<text class="tui-grid-label">{{item.psName}}<text decode="{{true}}" space="{{true}}"> </text>{{item.data}}</text>
</block>
<text class="tui-grid-label"><text decode="{{true}}" space="{{true}}"> </text></text>
</tui-grid-item>
<tui-grid-item cell="2" bgcolor="#ECF6FD" >
<view class="tui-grid-icon">
<text class="tui-grid-item-name">测试</text>
</view>
<block wx:for-items="{{outputElectricityList}}" wx:key="paramNo">
<text class="tui-grid-label" >{{item.psName}}<text decode="{{true}}" space="{{true}}"> </text>{{item.data}}</text>
</block>
<text class="tui-grid-label"><text decode="{{true}}" space="{{true}}"> </text></text>
</tui-grid-item>
<tui-grid-item cell="2" bgcolor="#ECF6FD" >
<view class="tui-grid-icon">
<text class="tui-grid-item-name">测试</text>
</view>
<block wx:for-items="{{activePowerList}}" wx:key="paramNo">
<text class="tui-grid-label">{{item.psName}}<text decode="{{true}}" space="{{true}}"> </text>{{item.data}}</text>
</block>
<text class="tui-grid-label"><text decode="{{true}}" space="{{true}}"> </text></text>
</tui-grid-item>
<tui-grid-item cell="2" bgcolor="#ECF6FD" >
<view class="tui-grid-icon">
<text class="tui-grid-item-name">测试</text>
</view>
<block wx:for-items="{{reActivePowerList}}" wx:key="paramNo">
<text class="tui-grid-label">{{item.psName}}<text decode="{{true}}" space="{{true}}"> </text>{{item.data}}</text>
</block>
<text class="tui-grid-label"><text decode="{{true}}" space="{{true}}"> </text></text>
</tui-grid-item>
</tui-grid>
<view id="tui-title" class="tui-title" >
<view class="tui-btm">
<tui-button type="blue" shadow="true" shape="circle" bind:click="move">测试数据详情</tui-button>
</view>
</view>
</scroll-view>
</swiper-item>
</block>
</swiper>
js
selectHight: function(){
let self = this;
console.log('======计算高度======')
var query = wx.createSelectorQuery();
console.log('sssss:',query)
query.select('#col-width').boundingClientRect(function (rect){
console.log('啊大大:',rect.width)
self.setData({
icoWidth: rect.width * 2
})
}).exec();
query.select('#item-height').boundingClientRect(function (rect){
let a = rect.width - self.data.icoWidth
let b = self.data.stringWidth
console.log("=======a:",a)
console.log("=======b:",b)
if(a>b){
// console.log("==========1行==========")
self.setData({
winHeight: 0 + rect.height
})
}else {
let c = (b*1.0)/(a*1.0)
let d = Math.ceil(c)
// console.log("==============多行============",c)
// console.log("==============多行向上取整============",d)
self.setData({
winHeight: 0 + rect.height * d
})
}
}).exec();
query.select('#tui-flex-box').boundingClientRect(function (rect){
self.setData({
winHeight: self.data.winHeight + rect.height
})
}).exec();
query.select('#tui-grid').boundingClientRect(function (rect){
self.setData({
winHeight: self.data.winHeight + rect.height
})
}).exec();
query.select('#tui-title').boundingClientRect(function (rect){
self.setData({
winHeight: self.data.winHeight + rect.height
})
self.setData({
clientHeight: self.data.winHeight
})
// console.log("最终高度:",self.data.clientHeight)
}).exec();
}
3、此方法有个坑的地方,就是有可能获取节点高度的时候,还没渲染完毕,此处我是在响应后台数据最长的方法中调用,还有一种方法是用延迟,还没具体实验