uniapp Swiper图片自适应高度
文章描述：
swiper里面图片很多时候高度是固定的，如果当用户上传的图片宽度和高度不一样时，如何处理图片在100%显示的时候自动适应高度
template
<template>
<view class="container">
<view class="uni-margin-wrap">
<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
:duration="duration"
:style="{height:bannerH}">
<swiper-item v-for="(item,index) in swiperList" :key="index">
<view class="swiper-item uni-bg-red">
<image :src="item.pic" mode="widthFix"></image>
</view>
</swiper-item>
</swiper>
</view>
</view>
</template>
script
1、获取设备的宽度和高度
2、获取图片的宽度和高度
3、计算出比例，根据比例计算高度
export default{
data(){
return{
indicatorDots: true,
autoplay: true,
interval: 2000,
duration: 500,
swiperList:[
{
pic:"../../static/images/banner.png"
},
{
pic:"../../static/images/banner.png"
}
],
win_W:'',
win_H:'',
bannerH:''
}
},
mounted() {
// 注意，这里要用个变量存this，不然进到getSystemInfo后this指向会变化，找不到data变量
var _this = this
uni.getSystemInfo({
success: function (res) {
_this.win_W = res.windowWidth
_this.win_H = res.windowHeight
}
})
setTimeout(()=>{
let win_W= _this.win_W // 设备宽度
_this.swiperList.forEach((item,index)=>{
//console.log(item.pic)
uni.getImageInfo({
src:item.pic,
success:function(image){
var imgBl = (image.width / win_W).toFixed(2) // 比例
_this.$set(item,'height',Math.ceil(image.height / imgBl)) // swiper数据 - 新增字段
_this.bannerH = Math.ceil(image.height / imgBl) + 'px'
}
})
})
console.log(_this.swiperList)
},500)
},
}style
.container{
}
.swiper{
width: 100%;
}
.swiper image{
width: 100%;
}
发布时间：2022/07/28
发表评论