小程序之scroll-view组件

scroll-view 可滚动视图区域。有时候我们的一些视图在手机指定的宽度和高度不够存放，那么可以放在 scroll-view 中，以滚动的形式显示被隐藏的内容。

滚动视图分为横向滚动和纵向滚动两种方式，下面我们对视图的滚动进行一一说明。

横向滚动

设置横向滚动（必须满足以下三点）：

1.给scroll-view添加scroll-x="{{true}}"属性（设置为允许横向滚动）

2.给scroll-view添加white-space:nowrap;属性（设置为不换行）

3.给scroll-view中的子元素设置为display:inline-block;（设置为子组件显示在一行）

示例代码如下：

.wxml文件代码

<scroll-view class="scroll-view" scroll-x="{{true}}">
  <view class="scroll-item bg_red"></view>
  <view class="scroll-item bg_yellow"></view>
  <view class="scroll-item bg_blue"></view>
  <view class="scroll-item bg_pink"></view>
  <view class="scroll-item bg_gray"></view>
</scroll-view>

.wxss文件代码

.scroll-view{
  width: 100%;
  height: 200px;
  white-space: nowrap;
  background: #43234f;
}
.scroll-view .scroll-item{
  display: inline-block;
  width: 100px;
  height: 100px;
}
.bg_red{
  background: red;
}
.bg_yellow{
  background: yellow;
}
.bg_blue{
  background: blue;
}
.bg_pink{
  background: pink;
}
.bg_gray{
background: gray;
}

实现效果如下：

纵向滚动

使用竖向滚动时，需要给scroll-view一个固定高度，通过 WXSS 设置 height。组件属性的长度单位默认为px，2.4.0起支持传入单位(rpx/px)。

.wxml文件

<scroll-view class="scroll-view-y" scroll-y="{{true}}">
  <view class="scroll-item-y bg_red"></view>
  <view id="yellow" class="scroll-item-y bg_yellow"></view>
  <view class="scroll-item-y bg_blue"></view>
  <view class="scroll-item-y bg_pink"></view>
  <view class="scroll-item-y bg_gray"></view>
</scroll-view>

.wxss文件

.scroll-view-y{
width: 100%;
height: 100px;
margin-top: 50px;
background: gray;
}
.scroll-view-y .scroll-item-y{
  width: 100%;
  height: 80px;
}
.bg_red{
  background: red;
}
.bg_yellow{
  background: yellow;
}
.bg_blue{
  background: blue;
}
.bg_pink{
  background: pink;
}
.bg_gray{
background: gray;
}

滚动相关设置

scroll-top="50px"设置竖向滚动条位置

scroll-into-view="yellow"值应为某子元素id（id不能以数字开头）滚动到该元素

scroll-with-animation="{{true}}" 在设置滚动条位置时使用动画过渡

enable-back-to-top="{{true}}"iOS点击顶部状态栏、安卓双击标题栏时，滚动条返回顶部，只支持竖向

upper-threshold="100" 距顶部/左边多远时，触发 scrolltoupper 事件默认是50