TMSUI

# List 列表

# 介绍

视图容器，滑倒底部时触发事件，加载更多数据。

# 使用指南

# 下拉刷新和加载更多

<tms-list bind:load-more="loadMore" height="{{250}}" loading-status="{{loadingStatus}}" refresher-enabled
          refresher-triggered="{{refresherTriggered}}"
          bind:refresh-start="refresh">
    <view class="cell" wx:for="{{listsBasic}}" wx:key="index">
        {{index}}
    </view>
</tms-list>

Component({
  data: {
    lists: [1,2,3,4],
    pageIndex: 1,
    loadingStatus: 'ready',
    refresherTriggered: false,
  },
  methods: {
    loadMore() {
      const { lists, pageIndex } = this.data;
      if (pageIndex < 5) {
        this.setData({
          loadingStatus: 'loading',
        });
        // 模拟获取远程数据
        setTimeout(() => {
          this.setData({
            lists: lists.concat([1,2,3,4]),
            pageIndex: pageIndex + 1,
            loadingStatus: 'ready',
          });
        }, 1000);
      } else {
        this.setData({
          loadingStatus: 'loadingEnd', // 如果为loadingError，显示加载失败。
        });
      }
    },
    refresh() {
      this.setData({
        loadingStatus: 'disable', // 刷新时屏蔽加载更多
        refresherTriggered: true,
      });
      setTimeout(() => { // 模拟重新获取了数据
        this.setData({
          listsBasic: [1,2,3,4,5],
          loadingStatus: 'ready',
          refresherTriggered: false,
          pageIndex: 1,
        });
      }, 2200);
    },
  }
})

# 使用slot

<tms-list bind:load-more="loadMore" height="{{250}}" loading-status="{{loadingStatus}}" custom-loading-slot
          custom-loading-error-slot custom-loading-end-slot>
    <view class="cell" wx:for="{{lists}}" wx:key="index">
        {{index}}
    </view>
    <view slot="loadingEnd" class="loadEnd">
        我是有底线的
    </view>
    <view slot="loading" class="loadEnd">
        正在拼命加载
    </view>
    <view slot="loadingError" class="loadEnd">
        哎呀，出现了未知错误。
    </view>
</tms-list>

# API

下拉刷新功能基于小程序内置组件scroll-view，部分api请参阅官方文档 (opens new window)

属性 说明 类型 默认值 版本
height 容器高度，默认250像素 number 250
threshold 滚动到底部触发加载更多的阈值 number 80
loading-status 加载状态控制变量,详情查看下文。 string ready
custom-loading-slot 加载中元素使用自定义slot boolean false
custom-loading-error-slot 加载错误使用自定义slot boolean false
custom-loading-end-slot 全部加载完使用自定义slot boolean false
refresher-enabled 开启下拉刷新功能 boolean false
custom-refresh-slot 自定义下拉刷新顶部slot boolean false
refresher-triggered 刷新状态控制，具体查阅scroll-view文档 boolean false
refresher-threshold 触发刷新阈值，具体查阅scroll-view文档 number 45
refresher-default-style 默认下拉刷新样式，具体查阅scroll-view文档 string black
refresher-background 下拉刷新背景色，具体查阅scroll-view文档 string #FFF

loading-status的可选值列表：

值 说明
ready 初始状态，可触发加载的状态
disable 禁用加载，屏蔽事件，一般用于刷新时设置此状态
loading 正在加载中的状态，不会触发加载
loadingEnd 加载结束状态，不会触发加载
loadingError 加载错误状态，不会触发加载

# EVENTS

下拉刷新功能基于小程序内置组件scroll-view，部分api请参阅官方文档 (opens new window)

属性 说明 类型
bind:load-more 触发加载更多的事件 (event) => {}
bind:refresherpulling 自定义下拉刷新控件被下拉 (event) => {}
bind:refresherrefresh 自定义下拉刷新被触发 (event) => {}
bind:refresherrestore 自定义下拉刷新被复位 (event) => {}
bind:refresherabort 自定义下拉刷新被中止 (event) => {}

# CSS变量

// 加载中模块高度
--list-loading-area-height: 120rpx;
// 加载中模块背景色
--list-loading-area-background: none;
// 加载中模块图标颜色
--list-loading-icon-color: #417FF9;
// 加载中模块图标大小
--list-loading-icon-size: 60rpx;
// 加载中模块文本颜色
--list-loading-text-color: rgba(0, 0, 0, .8);
// 加载中模块文本大小
--list-loading-text-font-size: 32rpx;

# FAQ

← Result 结果 →