微信小程序获取节点高度,达到自适应高度目的

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}}">&nbsp;&nbsp;&nbsp;&nbsp;</text>{{item.data}}V</text>
                                        </block>
                                        <text class="tui-grid-label"><text decode="{{true}}" space="{{true}}">&nbsp;&nbsp;&nbsp;&nbsp;</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}}">&nbsp;&nbsp;&nbsp;&nbsp;</text>{{item.data}}A</text>
                                        </block>
                                        <text class="tui-grid-label"><text decode="{{true}}" space="{{true}}">&nbsp;&nbsp;&nbsp;&nbsp;</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}}">&nbsp;&nbsp;&nbsp;&nbsp;</text>{{item.data}}</text>
                                        </block>
                                        <text class="tui-grid-label"><text decode="{{true}}" space="{{true}}">&nbsp;&nbsp;&nbsp;&nbsp;</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}}">&nbsp;&nbsp;&nbsp;&nbsp;</text>{{item.data}}</text>
                                        </block>
                                        <text class="tui-grid-label"><text decode="{{true}}" space="{{true}}">&nbsp;&nbsp;&nbsp;&nbsp;</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}}">&nbsp;&nbsp;&nbsp;&nbsp;</text>{{item.data}}</text>
                                        </block>
                                        <text class="tui-grid-label"><text decode="{{true}}" space="{{true}}">&nbsp;&nbsp;&nbsp;&nbsp;</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}}">&nbsp;&nbsp;&nbsp;&nbsp;</text>{{item.data}}</text>
                                        </block>
                                        <text class="tui-grid-label"><text decode="{{true}}" space="{{true}}">&nbsp;&nbsp;&nbsp;&nbsp;</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、此方法有个坑的地方,就是有可能获取节点高度的时候,还没渲染完毕,此处我是在响应后台数据最长的方法中调用,还有一种方法是用延迟,还没具体实验

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值