上拉加载

API（属性和方法）

属性	类型	默认值	是否必填	说明
className	String	''		自定义类名
style	String	''		自定义样式
scrollX	Boolean	false	两者其中一项必须为真	允许横向滚动
scrollY	Boolean	false		允许纵向滚动
upperThreshold	Number	50		距顶部/左边多远时（单位px），触发 scrolltoupper 事件
lowerThreshold	Number	50		距底部/右边多远时（单位px），触发 scrolltolower 事件
scrollTop	Number	0		设置竖向滚动条位置
scrollLeft	Number	0		设置横向滚动条位置
scrollIntoView	String			值应为某子元素id，则滚动到该元素，元素顶部对齐滚动区域顶部
scrollWithAnimation	Boolean	false		在设置滚动条位置时使用动画过渡
onScroll	Function	null		滚动时触发，event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth}，EventHandle
onScrollToUpper	Function	null	与滚动方向设置对应	滚动到顶部/左边，会触发 scrolltoupper 事件，EventHandle
onScrollToLower	Function	null		滚动到底部/右边，会触发 scrolltolower 事件，EventHandle
isErrorRequest	Object	null		请求出错Error对象
noMoreData	Boolean	false	是	列表是否还有数据
listData	Array	[]	是	列表数据

slots（支付宝小程序组件特有）

slotname	说明
top-view	列表顶部个性化区域
scroll-content-list	列表内容
load-more	加载更多提示
load-error	加载失败提示
no-nore-data	没有更多数据提示
empty	空内容
error	出错内容

用法

// page.json
{
  "defaultTitle": "",
  "usingComponents":{
    "scroll-load":".../scroll-load"    // 路径配置
  }
}

示例

<scroll-load
  className="hos-list-sv"
  scrollY="{{true}}"
  onScrollToLower="handleListScrollToLower"
  isErrorRequest="{{isErrorReq}}"
  noMoreData="{{noMoreData}}"
  listData="{{reqResult}}"
>
  <view slot="top-view" class="search-count" a:if="{{searchCount}}">
    共有{{searchCount}}条搜索结果
  </view>
  <view slot="scroll-content-list">
    <block a:for="{{reqResult}}">
      <hos-item hosItem="{{item}}" type="search" />
    </block>
  </view>
  <view slot="load-more">
    <in-loading />
  </view>
  <view slot="load-error">
    <in-loading requestErrorObj="{{isErrorReq}}" />
  </view>
  <view slot="no-nore-data">
    <no-more-data />
  </view>
  <view slot="empty">
    <empty text="未搜索到相关社区医院" />
  </view>
  <view slot="error">
    <empty requestErrorObj="{{isErrorReq}}" onRefreshTap="bindErrorReDirectTap" />
  </view>
</scroll-load>

注意事项

1. 本组件基于支付宝小程序原生组件可滚动视图区域能力实现，封装并管理了上拉瀑布式加载业务场景下的通用逻辑。需要特别注意的是，**使用竖向滚动时，需要给包裹此组件的容器不可变值的高度（显式设置height，或者flex布局）**。
2. 列表的部分状态需要在业务代码中维护，包括：

isLoading	是否在请求中，避免发出多次请求

3. 列表中的列表项、“正在加载中”、“亲，就这么多了”等另封装组件实现。
4. 针对自使用局部滚动的情况，一般采用flex布局，但是发现在低版本iOS下这样获取到的高度是“非固定的”，官方给出的解释是<scroll-view>组件必须设置固定的高度，不可以使用%单位。但其实指的是其能否获取到一个“固定”的高度，只要其父容器高度固定了，<scroll-view>使用%也是没问题的。那在这种情况下可以使用calc给其父容器一个“固定”的高度即可。但是这里就比使用flex麻烦一些，而且针对除滚动区域外，其他区域尺寸需固定的场景。
5. 针对局部滚动区域自适应+其他区域尺寸不固定的场景，我们可以将<scroll-view>作为全局容器，其他区域作为的方式slot为"top-view"填充进去。