WXML节点信息API

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

wx.createSelectorQuery()

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

wx.createSelectorQuery()文档

案例中的布局

这里页面上部分有三个view，它们的class分别是.kill-order、.bannerType、.search；
然后接下来的是一个class=content的scroll-view
下面直接贴代码给你们瞧瞧：

wxml

<view class="pageMain">
    <button class='kill-order' bindtap='openqr'>
        <image src='{{qricon}}' />
        <view>
            <text>销核订单</text>
        </view>
    </button>
    <view class='bannerType'>
        <view bindtap='tapAll' style='{{tapAllCss}}'>
            <text>全部订单</text>
        </view>
        <view bindtap='tapNoKill' style='{{tapNoKillCss}}'>
            <text>未销核</text>
        </view>
        <view bindtap='tapKilled' style='{{tapKilledCss}}'>
            <text>已销核</text>
        </view>
        <view bindtap='tapRefund' style='{{tapRefundCss}}'>
            <text>退款</text>
        </view>
    </view>
    <view class='search'>
        <view class='searchItem'>
            <image src='{{searchicon}}' />
            <input placeholder='请输入订单号'></input>
        </view>
    </view>
    <scroll-view class='content' bindscrolltolower="nextPage" scroll-y="true" style='height:{{scrollViewHeith}}px'>
        <block wx:for="{{orderData.content}}" wx:for-index="index" wx:for-item="item">
            <view class='item'>
                <view class='title'>
                    <text>{{item.orderName}}</text>
                </view>
                <view class='title'>
                    <text>用户微信昵称：{{item.wxNickname}}</text>
                </view>
                <view class='orderInfo'>
                    <view class='orderDedail'>
                        <text class='orderNum'>订单号：{{item.orderNum}}</text>
                        <text class='orderTime'>下单时间：{{item.createTime}}</text>
                    </view>
                    <view class='orderStatus'>
                        <text wx:if="{{item.orderStatus == 0}}">未付款</text>
                        <text wx:if="{{item.orderStatus == 1}}">未销核</text>
                        <text wx:if="{{item.orderStatus == 2}}">已销核</text>
                        <text wx:if="{{item.orderStatus == 3}}">退款</text>
                    </view>
                </view>
                <view class='orderDedail'>
                    <text>价格：{{item.orderPrice}}元</text>
                </view>
            </view>
        </block>
    </scroll-view>

</view>

在这里的话，实例中页面上面部分的三个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高度

效果

效果还行

本次demo使用到的wxml，wss，js文件
csdn原文