@mas.io/mas-record-list NPM

安装

tnpm install --save @alipay/mas-record-list

组件介绍

行业小程序卡片列表组件

支持分页请求加载（包括自动加载和手动点击加载）
支持自定义列表卡片和分页底部loading组件
支持自定义异常处理页面展示（包括空数据及网络异常），有默认兜底页

参数说明

属性	必填	参数类型	参数说明	默认值
onFetch	Y	Function	页面初始化时以及分页加载时获取列表数据函数，有一个入参pageNumber，默认值为0，表示当前页码，需要返回一个Array类型	(pagenumber) => []
onScroll	N	Function	列表滚动时触发，行为和scroll事件一致	(e) => {}
autoLoad	N	Boolean	是否自动加载下一页数据	true
pageSize	N	Number	单页列表数据个数	NaN
isFirstAppear	N	Boolean	是否展现页面时才加载	true

在小程序中使用

{
  "usingComponents": {
    "mas-record-list": "@alipay/mas-record-list/es/index"
  }
}

在 page.axml 中引用组件

<!-- 页面使用方式 -->
  <mas-record-list
    onFetch="onFetch"
    onScroll="onScroll"
    autoLoad="{{false}}"
    pageSize="{{8}}"
    isFirstAppear="{{true}}"
  >
    <view slot="card" slot-scope="props">
      <list-card data="{{ props.data }}" />
    </view>
    <view slot="loading">loading</view>
    <view slot="error">error page</view>
    <view slot="init">初始化数据loading</view>
  <mas-record-list/>

  async onFetch() {
    const { list = [] } = await rpc('xxxxx');
    return list;
  }
  onScroll(e) {
    console.info(e);
  }

Badges

@mas.io/falcon-core

@infinitebrahmanuniverse/nolb-_mas @everything-registry/sub-chunk-583

1.0.6

3 years ago