html 结构
<view class='content'>
<swiper
class="swiper"
:disable-touch="swiperTouch"
@change='swiperChange'
:current='headTab_index'>
<swiper-item class='swiper-item' v-for='(item,index) in tab' :key='index'>
<view class=''list' v-if='headTab_index == index'>
<list :list="list"/>
</view>
</swiper-item>
</swiper>
</view>
注意:swiper组件的父组件必须设置宽度。否则滑动翻页时会出现偏移的问题
.content {
width: 100vw;
}
.list {
height: 80vh; // 给list设置高度是因为列表为空时,防止滑动出现脱标和偏移
}
`
在app.vue 中写上修改swiper 样式的代码
//轮播图高度自动
.swiper {
height: auto;
}
.uni-swiper-wrapper {
overflow: visible!important;
}
.swiper-item {
width: 100vw!important;
height: auto!important;
}
0 个评论
要回复文章请先登录或注册