uniapp的swiper动态赋值问题

uniapp的swiper动态复制问题过程html的结构js中操作过程可以给组件赋class值，通过uniapp的createSelectorQuery方法动态获取高度如果多个组件在一起，可以通过view包裹住所有组件，获取view的高度mounted中获取初始高度，watch中监听切换，动态赋值给swiperhtml的结构<swiper :style="{height: component

qq_42176747

4183人浏览 · 2020-07-15 14:48:51

qq_42176747 · 2020-07-15 14:48:51 发布

uniapp的swiper动态赋值问题

过程

可以给组件赋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(){}
	...
}