@mas.io/invoice-list-wrapper NPM

安装

tnpm install --save @alipay/invoice-list-wrapper

组件介绍

发票域列表容器组件，注意结合了发票域常用的列表使用场景，统一了滚动加载、异常状态、loading 视图等等规范。

参数说明

属性	必填	参数类型	参数说明	默认值	示例
className	`false`	`string`	list-content 的 class	`''`	`''`
filter	`false`	`boolean`	条件筛选的视图是否展示	`true`	`true`
refreshToken	`false`	`string`	刷新列表的 Token 当 token 改变是将重新请求列表数据	`''`	可考虑时间戳
noMoreText	`false`	`string`	没有更多时的展示文案	`没有更多啦`	`没有更多啦`
loadingText	`false`	`string`	加载中的文案展示	`''`	`加载中...`
size	`false`	`number`	每页条数	`20`	`5、10、15、20`
gap	`false`	`number`	item 之间的间距	`24`	`24`
rowKey	`false`	`string`	行唯一 id, 组件将会对获取的数据进行取值，作为列表的`key`	`id`	`id`
onLoad	`true`	`function`	加载列表的函数,组件内部通过改方法的返回值来进行列表数据的获取/更新	`null`	`(pageNum: number, size: number, opt: any) => newListArray`
onRefresh	`false`	`function`	在局部异常视图中，列表重新刷新时	`null`	`() => newListArray`
onItemTap	`false`	`function`	当 item 点击时	`null`	`(item: any) => void`

slot 插槽

Badges

默认插槽

 <list-wrapper onLoad="{{ onLoad }}">
    <view slot-scope="item">
      <!-- 列表元素视图内容 -->
      <!-- item.info 为每个遍历出来的数据对象 -->
      <text>{{ item.info.id }}</text>
    </view>
 </list-wrapper>

`header`

 <list-wrapper onLoad="{{ onLoad }}">
    <view slot="header">
      <!-- 头部视图内容 -->
      <!-- 该内容在列表视图上方 -->
      <!-- 不继承列表的的css -->
    </view>
 </list-wrapper>

`filter`

 <list-wrapper onLoad="{{ onLoad }}">
    <view slot="filter">
      <!-- 筛选视图内容 -->
      <!-- 该内容在列表视图上部 -->
      <!-- 继承列表的的css，如: padding margin 等 -->
    </view>
 </list-wrapper>

`footer`

 <list-wrapper onLoad="{{ onLoad }}">
    <view slot="footer" slot-scope="data">
      <!-- 底部视图内容 -->
      <!-- 该内容在列表视图下方 -->
      {{ data.list }} <!-- 列表数据 -->
      {{ data.error }} <!-- boolean类型的列表错误状态 -->
    </view>
 </list-wrapper>

在小程序中使用

{
  "usingComponents": {
    "list-wrapper": "@alipay/invoice-list-wrapper/es/index"
  }
}

在 page.axml 中引用组件

<!-- 页面使用方式 -->
<list-wrapper className="list" onLoad="onListFetch">
  <view class="header" slot="header">
    header
  </view>

  <view class="filter" slot="filter">
    filter
  </view>

  <view class="list-item" slot-scope="item">
    name: {{ item.info.name }}
  </view>

  <view class="footer" slot="footer">
    footer
  </view>
</list-wrapper>

Badges

@mas.io/falcon-core @mas.io/any-style

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

0.0.1

2 years ago