uni-app 动态设置 swiper 的高度

开发中遇到两种需要动态设置 swiper 高度的情况：

1. 第一种，需要除开顶部或底部元素获取屏幕剩余高度。
   • 如果顶部或底部元素高度固定，直接使用 calc 函数来计算；
   • 如果高度不固定，通过 uni.createSelectorQuery 来获取高度后计算。
2. 第二种，需要根据子元素来计算 swiper 的高度。
   • 通过 uni.createSelectorQuery 来获取所有子元素的高度，通过传入 current 来获取当前 item 的高度。

<template>
    <view>
        <page-head title="swiper" class="page-head"></page-head>
        <view class="uni-margin-wrap">
            <!-- <swiper class="swiper"> -->
            <!-- <swiper class="swiper" :style="{height: swiperHeight + 'px'}"> -->
            <swiper class="swiper" :current="current" :style="{height: swiperItemHeight + 'px'}" @change="swiperChange">
                <swiper-item>
                    <view class="swiper-item-wrap">
                        <view class="swiper-item uni-bg-red" v-for="item in 3" :key="item">A-{{item}}</view>
                    </view>
                </swiper-item>
                <swiper-item>
                    <view class="swiper-item-wrap">
                        <view class="swiper-item uni-bg-green" v-for="item in 1" :key="item">B-{{item}}</view>
                    </view>
                </swiper-item>
                <swiper-item>
                    <view class="swiper-item-wrap">
                        <view class="swiper-item uni-bg-blue" v-for="item in 2" :key="item">C-{{item}}</view>
                    </view>
                </swiper-item>
            </swiper>
        </view>
    </view>
</template>
<script>
    export default {
        data() {
            return {
                swiperHeight: 0,
                swiperItemHeight: 0
            }
        },
        mounted() {
            // 第一种 获取屏幕剩余高度
            // this.getSwiperHeight()
            // 第二种 获取子元素的高度
            this.getSwiperItemHeight()
        },
        methods: {
            getSwiperHeight() {
                uni.createSelectorQuery()
                    .in(this)
                    .select('.page-head')
                    .boundingClientRect()
                    .exec(res => {
                        const windowHeight = uni.getSystemInfoSync().windowHeight
                        // 屏幕高度 - 顶部高度
                        this.swiperHeight = windowHeight - res[0].height
                    })
            },
            getSwiperItemHeight(current = 0) {
                uni.createSelectorQuery()
                    .in(this)
                    .selectAll('.swiper-item-wrap')
                    .boundingClientRect()
                    .exec(res => {
                        this.swiperItemHeight = res[0][current].height
                    })
            },
            swiperChange(e) {
                this.getSwiperItemHeight(e.detail.current)
            }
        }
    }
</script>

<style>
    page {
        background-color: #e2e2e2;
    }
    .uni-margin-wrap {
        width:690rpx;
        margin:0 30rpx;
        background-color: #fff;
    }
    /* 使用 calc 函数来计算 */
    /* .swiper {
            height: calc(100vh - 78px);
    } */
    .swiper-item {
        display: block;
        height: 300rpx;
        line-height: 300rpx;
        text-align: center;
    }
</style>