ali-miniapp-scroll-load

上拉加载

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 | 出错内容 |

用法

json

// page.json

{

  "defaultTitle": "",

  "usingComponents":{

    "scroll-load":".../scroll-load"    // 路径配置

  }

}





示例

html

  className="hos-list-sv"

  scrollY="{{true}}"

  onScrollToLower="handleListScrollToLower"

  isErrorRequest="{{isErrorReq}}"

  noMoreData="{{noMoreData}}"

  listData="{{reqResult}}"

>

  

    共有{{searchCount}}条搜索结果

注意事项

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

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

3. 列表中的列表项、“正在加载中”、“亲，就这么多了”等另封装组件实现。

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	[]	是	列表数据

用法

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

示例

html

className="hos-list-sv"
scrollY="{{true}}"
onScrollToLower="handleListScrollToLower"
isErrorRequest="{{isErrorReq}}"
noMoreData="{{noMoreData}}"
listData="{{reqResult}}"
>

共有{{searchCount}}条搜索结果