排版代码

<view class="zonglistSwiperHeight" :style="{'height': swiperHeight +'px'}">
//tab栏
			<view>
				<u-tabs-swiper ref="uTabs" :list="list" :is-scroll="false" :current="current" @change="tabsChange" swiperWidth="750"></u-tabs-swiper>
			</view>
			//轮播图
			<swiper class="listSwiperHeight" ref="listHeight" :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish">
				<swiper-item class="swiper-items"  >
					<scroll-view :scroll-y="false" :style="{'height':$attrs.height + 'px','width': '100%', 'display':'contents'}" @scrolltolower="onreachBottom">
					</scroll-view>
				</swiper-item>
				<swiper-item class="swiper-item" >
					<scroll-view :scroll-y="false" :style="{'height':$attrs.height + 'px','width': '100%', 'display':'contents'}" @scrolltolower="onreachBottom"></scroll-view>
				</swiper-item>
			</swiper>
		</view>

根据tab获取高度代码

//第一个
setHeight() {
//获取元素
				var query =  uni.createSelectorQuery();
				//打印当前的数据个数
				console.log(this.mockRowData.length)
				//赋值
				 var moleng =  this.mockRowData.length;
				 //获取元素并执行的方法
			query.select('.swiper-items').boundingClientRect(rect => {
			//数据个数乘以当前每个轮播体的高
					let listHei = moleng * rect.height;
					console.log('轮播图高度为', listHei)
					赋值给总高度
					this.swiperHeight = listHei;
				}).exec();
				console.log('wuwuwu')
			},
			//第二个  解释如上
			TosetHeight() {	
				var query = uni.createSelectorQuery();
				console.log(this.TomockRowData.length)
				var moleng = this.TomockRowData.length;
				query.select('.swiper-item').boundingClientRect(rect => {
					let listHei = moleng * rect.height;
					console.log('轮播图高度为160', listHei)
					this.swiperHeight = listHei;
				}).exec();
			},
			

tab栏触发

// tabs通知swiper切换
			tabsChange(index) {
				
				console.log('我的索引为',this.current)
//当前索引为0
				if (this.current=='0') {
					this.TosetHeight();
				} else {
					this.setHeight();
				}
				//当前索引号选中当前tab栏的选项
				this.swiperCurrent = index;
			}

每次滑动都会触发这个函数

	animationfinish(e) {
	//获取当前的索引
				let current = e.detail.current;
				//索引为几就选中几
				if (current=='0') {
					this.setHeight();
				} else {
					
					this.TosetHeight();
				}
				//获取并修改当前tab的索引
				this.$refs.uTabs.setFinishCurrent(current);
				//将当前的索引赋值给当前的轮播图
				this.swiperCurrent = current;
	
			},
Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐