uniapp中的swiper高度自适应,图片显示问题
swiper部分
<template>
<view style="width:100%;">
<swiper :style="{height:windowHeight+'px'}" :indicator-dots="true" :autoplay="true" :interval="2000" :duration="500"
:circular="true" :current="tabIndex" @click="changeTab">
<swiper-item style="width: 100%;" v-for="item in imgs" :key="item.id">
<image :src="item.url" mode="widthFix" class="img"></image>
</swiper-item>
</swiper>
</view>
</template>
js求出可使用高度
onLoad(option) {
this.systemInfo = uni.getSystemInfoSync()
this.windowHeight = this.systemInfo.windowHeight;
console.log(this.windowHeight);
},
css中的图片要设置成块,可以填充100%
.img {
width: 100%;
height: auto;
}
完整代码
<template>
<view style="width:100%;">
<swiper :style="{height:windowHeight+'px'}" :indicator-dots="true" :autoplay="true" :interval="2000" :duration="500"
:circular="true" :current="tabIndex" @click="changeTab">
<swiper-item style="width: 100%;" v-for="item in imgs" :key="item.id">
<image :src="item.url" mode="widthFix" class="img"></image>
</swiper-item>
</swiper>
</view>
</template>
<script>
export default {
data() {
return {
imgs: [{
url: '../../static/init-bg.png',
id: 1
}, {
url: '../../static/init-bg.png',
id: 2
},
{
url: '../../static/init-bg.png',
id: 3
}, {
url: '../../static/init-bg.png',
id: 4
},
{
url: '../../static/init-bg.png',
id: 5
}
],
height: '',
tabIndex:0,
systemInfo: {},
swiperHeight: '',
windowHeight: '',
}
},
onLoad(option) {
this.systemInfo = uni.getSystemInfoSync()
this.windowHeight = this.systemInfo.windowHeight;
console.log(this.windowHeight);
},
methods: {
changeTab() {
this.tabIndex++;
if (this.tabIndex > this.imgs.length - 1) {
uni.switchTab({
url: '/pages/index/index'
})
}
},
}
}
</script>
<style>
.img {
width: 100%;
height: auto;
}
</style>