uniapp轮播图高度随变和左右滑动也获取高度
排版代码<view class="zonglistSwiperHeight" :style="{'height': swiperHeight +'px'}">//tab栏<view><u-tabs-swiper ref="uTabs" :list="list" :is-scroll="false" :current="current" @change="tabsCha
·
排版代码
<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;
},
更多推荐
已为社区贡献7条内容
所有评论(0)