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

1、利用微信提供的wx.createSelectorQuery()方法实现
2、实现代码:
.wxml

           
                    
                        
                            
                                
                                    
                                    {{item.dName}}
                                    {{deviceDetail.dName}}
                                    
                                
                                
                                    
                                        
                                            {{harmonicElectricityList == null?'暂无':harmonicElectricityList}}%
                                            测试
                                        
                                        
                                            {{harmonicVoltageList == null?'暂无':harmonicVoltageList}}%
                                            测试
                                        
                                        
                                            {{maxDeviceDetail.maxDay == null?'暂无':maxDeviceDetail.maxDay}}kW
                                            本日最高
                                        
                                        
                                            {{maxDeviceDetail.maxMonth == null?'暂无':maxDeviceDetail.maxMonth}}kW
                                            本月最高
                                        
                                    
                                
                                
                                    
                                        
                                            测试
                                        
                                        
                                            {{item.psName}}    {{item.data}}V
                                        
                                            
                                    
                                    
                                        
                                            测试
                                        
                                        
                                            {{item.psName}}    {{item.data}}A
                                        
                                            
                                    
                                    
                                        
                                            测试
                                        
                                        
                                            {{item.psName}}    {{item.data}}
                                        
                                            
                                    
                                    
                                        
                                            测试
                                        
                                        
                                            {{item.psName}}    {{item.data}}
                                        
                                            
                                    
                                    
                                        
                                            测试
                                        
                                        
                                            {{item.psName}}    {{item.data}}
                                        
                                            
                                    
                                    
                                        
                                            测试
                                        
                                        
                                            {{item.psName}}    {{item.data}}
                                        
                                            
                                    
                                

                                
                                    
                                        测试数据详情
                                    
                                
                            
                        
                    
                

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、此方法有个坑的地方,就是有可能获取节点高度的时候,还没渲染完毕,此处我是在响应后台数据最长的方法中调用,还有一种方法是用延迟,还没具体实验

你可能感兴趣的:(微信小程序)