滚动视图
原创...大约 1 分钟
可滚动视图区域。可实现容器内元素水平和垂直方向滚动
垂直滚动
给容器设置 scroll-y,可实现垂直滚动
<scroll-view class="scroll-view_V" scroll-y="true">
<view class="scroll-view-item demo-text-1">1</view>
<view class="scroll-view-item demo-text-2">2</view>
<view class="scroll-view-item demo-text-3">3</view>
</scroll-view>
.scroll-view_V {
height: 300rpx;
.scroll-view-item {
width: 100%;
height: 200rpx;
}
.demo-text-1 {
background-color: red;
}
.demo-text-2 {
background-color: green;
}
.demo-text-3 {
background-color: blue;
}
}
水平滚动
给容器设置 scroll-x,可实现水平滚动
<scroll-view class="scroll-view_H" scroll-x="true">
<view class="scroll-view-item demo-text-1"></view>
<view class="scroll-view-item demo-text-2"></view>
<view class="scroll-view-item demo-text-3"></view>
</scroll-view>
.scroll-view_H {
/* 规定容器内元素不进行换行 */
width: 100%;
white-space: nowrap;
.scroll-view-item {
display: inline-block;
width: 80%;
height: 300rpx;
}
.demo-text-1 {
background-color: red;
}
.demo-text-2 {
background-color: green;
}
.demo-text-3 {
background-color: blue;
}
}
常用属性
属性 | 类型 | 默认值 | 必填 | 说明 |
---|---|---|---|---|
scroll-x | boolean | false | 否 | 允许横向滚动 |
scroll-y | boolean | false | 否 | 允许纵向滚动 |
scroll-top | number/string | 否 | 设置竖向滚动条位置 | |
scroll-left | number/string | 否 | 设置横向滚动条位置 | |
refresher-enabled | boolean | false | 否 | 开启自定义下拉刷新 |
Powered by Waline v2.15.7