coolui-scroller

Appearance

快速跳转

loadmore 加载更多组件 ​

介绍 ​

该组件为上拉加载时的效果组件。组件分为 3 种状态效果：

  1. 等待执行加载时 more 状态
  2. 加载中的 loading 状态
  3. 加载到最后无数据时的 noMore 状态
示例图

引入 ​

在app.json或index.json中引入组件

json
"usingComponents": {
  "loadmore": "coolui-scroller/loadmore/index"
}

代码演示 ​

html
<scroller class="my-scroller">
  <loadmore
    slot="loadmore"
    status="{{loadMoreSetting.status}}"
    loading="{{loadMoreSetting.loading}}"
    noMore="{{loadMoreSetting.noMore}}"
    more="{{loadMoreSetting.more}}"
  />
</scroller>
js
Page({
  data: {
    loadMoreSetting: {
      status: 'more',
      more: {
        text: '上拉加载更多',
        color: '#999',
      },
      loading: {
        text: '加载中...',
        color: '#999',
      },
      noMore: {
        text: '-- 到底啦 --',
        color: '#999',
      },
    },
  },
})

配置 ​

参数说明类型默认值版本
status显示状态设置，可设置more、loading、noMore,需根据列表数据加载情况切换状态Stringmore3.0.0
moreText显示状态为more时显示的文字String上拉加载更多3.0.0~3.0.9
loadingText显示状态为loading时显示的文字String加载中...3.0.0~3.0.9
noMoreText显示状态为noMore时显示的文字String-- 到底啦 --3.0.0~3.0.9
color设置文字颜色String#9999993.0.0~3.0.9
more显示状态为more时显示的文字Object{ text: '上拉加载更多', color: '#333333'}3.1.0
loading显示状态为loading时显示的文字Object{ text: '加载中...', color: '#999999'}3.1.0
noMore显示状态为noMore时显示的文字Object{ text: '-- 到底啦 --', color: '#999999'}3.1.0