监听图片的高度,然后给swiper设置动态高度,跟图片高度一致即可解决自适应
首先声明两个变量
styleheight:'350',
currentindex:0,// 幻灯片切换下标
在swiper中设置监听函数 给img设置动态id
<swiper class="swiprt" circular :indicator-dots="indicatorDots" :autoplay="true" :interval="interval"
:style="{'height':styleheight+'px'}" @change="qiehuan">
<swiper-item v-for="(sm,si) in banner" :key="si">
<image :id="'wp'+si" mode="widthFix" :src="imgUrl+sm"></image>
</swiper-item>
</swiper>
设置监听函数,让swiper高度跟图片高度一致
//幻灯片切
qiehuan(e){
this.currentindex = e.detail.current
this.setSwiperHeight()
},
//获取元素信息
setSwiperHeight() {
let element = "#wp"+this.currentindex
let query = uni.createSelectorQuery().in(this)
query.select(element).boundingClientRect();
query.exec(res=>{
if(res && res[0]){
this.styleheight = res[0].height
}
})
},