上拉加载

API（属性和方法）

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. 列表中的列表项、“正在加载中”、“亲，就这么多了”等另封装组件实现。