优化支付宝小程序使用swiper组件横向滑动,高度不生效代码
时间: 2024-03-23 08:42:26 浏览: 70
如果在支付宝小程序使用 `swiper` 组件横向滑动时,出现高度不生效的情况,可以尝试以下优化代码:
```html
<view class="swiper-wrap">
<swiper class="swiper" indicator-dots="{{false}}" vertical="{{false}}">
<swiper-item class="swiper-item" wx:for="{{items}}" wx:key="index">
<view class="item">Item {{index + 1}}</view>
</swiper-item>
</swiper>
</view>
```
```css
.swiper-wrap {
height: 100%;
overflow: hidden;
}
.swiper {
height: 100%;
}
.swiper-item {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}
.item {
width: 100%;
text-align: center;
font-size: 28rpx;
line-height: 100%;
color: #333;
}
```
其中,我们在 `swiper` 外面套了一层 `view`,并设置了 `height: 100%;` 和 `overflow: hidden;`,让其作为容器,设置容器高度和隐藏容器溢出的部分。每个滑动项的样式为 `swiper-item`,设置了 `height: 100%;`,让其高度自适应。在 `.item` 的样式中,去掉了 `height` 属性,使其高度自适应,同时设置了 `text-align: center;` 和 `line-height: 100%;`,让其垂直居中。
阅读全文