0.0.2 • Published 6 years ago
ali-miniapp-scroll-load v0.0.2
上拉加载
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>
注意事项
- 本组件基于支付宝小程序原生组件可滚动视图区域能力实现,封装并管理了上拉瀑布式加载业务场景下的通用逻辑。需要特别注意的是,**使用竖向滚动时,需要给包裹此组件的容器不可变值的高度(显式设置height,或者flex布局)**。
- 列表的部分状态需要在业务代码中维护,包括:
isLoading | 是否在请求中,避免发出多次请求 |
---|
- 列表中的列表项、“正在加载中”、“亲,就这么多了”等另封装组件实现。