企业官网建站 小程序开发 云逸学习园地
技术文章 许愿墙
技术文章 PHP学习 Javascript学习 DIV+CSS学习 uniapp学习 HTML学习 微信小程序、公众号知识点 VUE知识学习

小程序幻灯片高度自适应,不同图片高度不同

2024-04-07 10:54:22 浏览 2411

监听图片的高度,然后给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
}
})
                },


网站开发者电话

18066742510

个人微信号
个人公众号
个人小程序
个人抖音