开发中遇到两种需要动态设置 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>