排版代码
<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; },