uni-app官方内置swiper有固定高度150px问题 配合uni-swiper-dot使用存在异常
uni-app官方内置swiper有固定高度150px问题 配合uni-swiper-dot使用存在异常
源码请见附件！
<template>
<view class="content">
<uni-swiper-dot :info="bannerList" :current="current" :dotsStyles="dotsStyles">
<swiper class="swiper-box" @change="change" autoplay="true" circular="true">
<swiper-item v-for="(item, index) in bannerList" :key="index">
<image class="swiperitem" mode="widthFix" src="../../static/banner.png"/>
</swiper-item>
</swiper>
</uni-swiper-dot>
<image class="zhilaizhiwang" src="../../static/Snip20191111_2.png" mode="widthFix"/>
</view>
</template>
<script>
import uniSwiperDot from '@/components/uni-swiper-dot/uni-swiper-dot.vue'
export default {
components: {
uniSwiperDot
},
data() {
return {
bannerList:[0,1,2],
current: 0,
dotsStyles:{
bottom:10,
backgroundColor: 'rgba(255, 255, 255,1)',
border: '1px rgba(255, 255, 255,1) solid',
color: '#fff',
selectedBackgroundColor: 'rgba(255, 90, 95,0.9)',
selectedBorder: '1px rgba(255, 90, 95,0.9) solid'
}
}
},
onLoad() {
},
methods: {
change(e) {
this.current = e.detail.current
}
}
}
</script>
<style>
.content {
background-color: lightgray;
}
.swiper-box{
margin-bottom: 10px;
width: 100%;
background-color: green;
}
.swiperitem{
width: 100%;
height: 100%;
}
.zhilaizhiwang{
width: 100%;
margin-bottom: 5px;
}
</style>
5 回复
针对uni-app官方内置的swiper组件在配合uni-swiper-dot使用时存在的固定高度150px问题，我们可以通过自定义swiper组件的高度来解决。通常，swiper组件的高度由其内容决定，但如果设置了固定高度（如150px），则会限制其内容的显示。为了解决这个问题，并确保uni-swiper-dot能够正确显示，我们可以采用以下步骤：
-
移除或覆盖swiper的固定高度：通过CSS样式覆盖swiper组件的默认高度设置。
-
动态计算swiper高度：如果swiper内容高度是动态的，可以通过JavaScript动态计算并设置swiper的高度。
-
确保uni-swiper-dot正确显示：确保uni-swiper-dot组件正确绑定到swiper组件，并且其显示逻辑不受swiper高度影响。
以下是一个示例代码，展示如何自定义swiper组件的高度，并确保uni-swiper-dot正常工作：
<template>
<view>
<swiper :style="{ height: swiperHeight + 'px' }" @change="onSwiperChange" :indicator-dots="false">
<swiper-item v-for="(item, index) in items" :key="index">
<view>
{{ item.text }}
</view>
</swiper-item>
</swiper>
<uni-swiper-dot :active="activeIndex" :total="items.length"></uni-swiper-dot>
</view>
</template>
<script>
export default {
data() {
return {
items: [
{ text: 'Slide 1' },
{ text: 'Slide 2' },
{ text: 'Slide 3' }
],
activeIndex: 0,
swiperHeight: 300 // 初始高度，可以根据需要动态调整
};
},
methods: {
onSwiperChange(event) {
this.activeIndex = event.detail.current;
},
// 如果需要动态计算高度，可以在mounted或watch中调整swiperHeight
calculateSwiperHeight() {
// 这里只是一个示例，实际高度计算逻辑可能更复杂
this.swiperHeight = window.innerHeight - 50; // 假设顶部和底部有50px的间距
}
},
mounted() {
// 可以在这里调用calculateSwiperHeight()来动态设置高度
// this.calculateSwiperHeight();
}
};
</script>
<style scoped>
/* 覆盖swiper的默认高度，如果需要的话 */
swiper {
height: auto !important; /* 尝试覆盖固定高度，但!important可能不是必要的 */
}
</style>
在这个示例中，我们通过:style绑定动态设置swiper的高度，并通过onSwiperChange方法更新activeIndex，从而确保uni-swiper-dot能够正确显示当前活动的swiper项。如果swiper内容的高度是动态的，可以在mounted或watch中调用calculateSwiperHeight方法来调整swiper的高度。
