滚动视图

可滚动视图区域。可实现容器内元素水平和垂直方向滚动

垂直滚动

给容器设置 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	否	开启自定义下拉刷新