支付宝小程序横向滑动,高度自适应代码
时间: 2024-03-23 11:42:23 浏览: 98
小程序实现横向滑动日历效果
支付宝小程序横向滑动,高度自适应的代码如下:
```html
<view class="scroll-view">
<scroll-view scroll-x="{{true}}" style="white-space: nowrap;">
<view class="item">Item 1</view>
<view class="item">Item 2</view>
<view class="item">Item 3</view>
<view class="item">Item 4</view>
<view class="item">Item 5</view>
</scroll-view>
</view>
```
```css
.scroll-view {
height: 100%;
}
.item {
display: inline-block;
width: 100%;
height: 100%;
text-align: center;
font-size: 28rpx;
line-height: 100%;
color: #333;
}
```
其中,外层的 `scroll-view` 设置了高度为 100%,作为容器,内部的 `scroll-view` 设置了 `scroll-x` 为 true,表示横向滑动,同时设置了 `white-space: nowrap;`,防止换行。每个滑动项的样式为 `item`,设置了 `display: inline-block;`,使其可以横向排列,而 `width: 100%;` 和 `height: 100%;` 则让其高度自适应。
阅读全文