阿健
阿健
  • 发布:2021-04-08 11:00
  • 更新:2021-04-08 11:00
  • 阅读:2804

关于swiper做长列表的解决方案(不需要scroll-view)

分类:uni-app

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 关注 分享

要回复文章请先登录注册