swiper组件是怎么自适应高度

分类：uni-app

新闻/资讯应用模板的swiper组件是怎么自适应高度的？我用HBuilder X 2.7.9 用内置uni-ui的项目模板生成的项目，使用swiper组件高度无法自适应？？？？？？？？？？？？？

内置uni-ui的项目模板的swiper

新闻/资讯应用模板的swiper

0 赞关注分享

9 个评论

要回复文章请先登录或注册

dev_pz

回复 len168com ：

这种写法如果内容很长，不会滚动的

2022-11-22 14:50

len168com (作者)

回复 len168com ：

样式里加上：

/* #ifndef APP-NVUE */
view {
display: flex;
flex-direction: column;
}
/* #endif */

2022-08-12 16:13

len168com (作者)

父根节点page用position: absolute定位top: 0; left: 0; right: 0; bottom: 0; 这样铺满全屏
父节点page-container用flex:1铺满
swiper 也用flex:1铺满

```
<template>
<view class="page">
<view class="page-container">
<swiper class="swiper-box" ref="cateSwiper" :current="0" :duration="300" >
<swiper-item class="swiper-item" v-for="(item, index) in tabList" :key="index">
<text>{{item.name}}</text>
</swiper-item>
</swiper>
</view>
</view>
</template>

<script>
export default {
data() {
return {
tabList: [
{
id: "tab1",
name: "栏目1",
status: 1
},
{
id: "tab2",
name: "栏目2",
status: 2
}
],
}
}
}
</script>

<style lang="scss" scoped>
.page {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.page-container {
position: relative;
flex: 1;
}
.swiper-box {
flex: 1;
}
.swiper-item {
justify-content: center;
align-items: center;
}
</style>
```

2022-08-12 16:12

chunge404

回复 len168com ：

咋解决的，分享一下啊

2022-05-08 11:36

1***@qq.com

回复 1***@qq.com ：

我也解决了要在父级视图加flex: 1;

2021-09-30 11:04

1***@qq.com

回复 len168com ：

怎么解决的我也是没有自动铺满

2021-09-30 10:45

len168com (作者)

已解决

2021-03-25 23:58

芜湖一

回复 3***@qq.com ：

不得行

2020-11-04 16:56

3***@qq.com

<view style="flex: 1;">

<swiper style="flex: 1;" :current="0" :duration="300" @change="swiperChange">
<swiper-item class="swiper-item">

<text style="height: 500rpx;background-color: #F000EE;">aslfkj </text>
<text style="height: 500rpx;background-color: #F000EE;">aslfkj </text>
<text style="height: 500rpx;background-color: #F000EE;">aslfkj </text>
</swiper-item>
</swiper>

</view>

2020-08-19 15:33

swiper组件是怎么自适应高度

9 个评论

目录

公告

相关问题