过程
- 可以给组件赋class值,通过uniapp的createSelectorQuery方法动态获取高度
- 如果多个组件在一起,可以通过view包裹住所有组件,获取view的高度
- mounted中获取初始高度,watch中监听切换,动态赋值给swiper
html的结构
<swiper :style="{height: componentHeight + 70 + 'px'}" @change="swiperChange" :current="currentTab">
<swiper-item>
<view class="wrapper">
<Introduce :vipInfo="vipInfo" :jieshao="gameInfo.describe" :img="gameInfo.info_img_link"></Introduce>
<Cash :cashList = 'couponInfo' @close="onCloseWays" :isShow="true" ></Cash>
<Recharge @chong = 'onChong' :isShow="true" :rechargeInfo="rechargeInfo" @more="onMore"></Recharge>
<Activity :isShow="true" @more="onMore" :activeInfo="activeInfo"></Activity>
<Gift :isShow="true" @more="onMore" :packageInfo="packageInfo"></Gift>
<Wlk :isShow="true" @more="onMore" :serviceInfo="serviceInfo"></Wlk>
<Change @purches="onPurches" :isShow="true" @more="onMore" :transactionInfo="transactionInfo" :img="gameInfo.thumb_img"></Change>
</view>
</swiper-item>
<swiper-item>
<Recharge @chong = 'onChong' class='recharge-item' :rechargeInfo="rechargeInfoOne" :isShow="false"></Recharge>
</swiper-item>
<swiper-item>
<Activity class='activity-item1' :activeInfo="activeInfoOne"></Activity>
</swiper-item>
<swiper-item>
<Gift class='gift-item' :packageInfo = "packageInfoOne"></Gift>
</swiper-item>
<swiper-item>
<Wlk class='wlk-item' :serviceInfo="serviceInfoOne"></Wlk>
</swiper-item>
<swiper-item>
<Change class='change-item1' @purches="onPurches" :transactionInfo="transactionInfoOne" :img="gameInfo.thumb_img"></Change>
</swiper-item>
</swiper>
js中操作
mounted中:
var compHei = uni.createSelectorQuery().in(this);
compHei.select('.wrapper').boundingClientRect(data=>{
this.componentHeight = data.height
console.log(that.componentHeight,'第一次进入的高度')
}).exec()
watch中
currentTab(newVal,oldVal) {
if(newVal==0) {
var compHei = uni.createSelectorQuery().in(this);
compHei.select('.taoqilai').boundingClientRect(data=>{
this.componentHeight = data.height
console.log(this.componentHeight,'计算的简介的动态高度')
}).exec()
}
if(){}
if(){}
...
}