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

  1. 云栖社区>
  2. 博客>
  3. 正文

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

luckcheng 2018-04-09 15:39:39 浏览5912
展开阅读全文

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原文

网友评论

登录后评论
0/500
评论