# LoadMore 加载更多
此组件一般用于标识页面底部加载数据时的状态,共有三种状态:
- 加载前,显示"加载更多",加入点击可选,是因为数据不够一页时,无法触发页面的
onReachBottom
生命周期 - 加载中,显示"正在加载...",2种动画可选
- 加载后,如果还有数据,回到"加载前"状态,否则加载结束,显示"没有更多了"
# 平台差异说明
App(vue) | App(nvue) | H5 | 小程序 |
---|---|---|---|
√ | √ | √ | √ |
# 基本使用
- 通过
status
设置组件的状态,加载前值为loadmore
,加载中为loading
,没有数据为nomore
注意:以下示例仅为模拟效果,实际中请根据自己的逻辑,修改代码的实现
<template> <view class="wrap"> <view class="item u-border-bottom" v-for="(item, index) in list" :key="index"> {{'第' + item + '条数据'}} </view> <u-loadmore :status="status" /> </view> </template> <script> export default { data() { return { status: 'loadmore', list: 15, page: 0 } }, onReachBottom() { if(this.page >= 3) return ; this.status = 'loading'; this.page = ++ this.page; setTimeout(() => { this.list += 10; if(this.page >= 3) this.status = 'nomore'; else this.status = 'loading'; }, 2000) } } </script> <style lang="scss" scoped> .wrap { padding: 24rpx; } .item { padding: 24rpx 0; color: $u-content-color; font-size: 28rpx; } </style>
✅ Copy success!
# 控制组件的提示以及动画效果
- 如果不需要图标,可以设置
icon
为false
- 可以设置
is-dot
为true
,在没有数据时,内容显示为一个"●"替代默认的"没有更多了" - 可以通过配置
loading-text
配置提示的文字,该参数为一个对象值,可以修改默认的文字提示,见如下:
<template> <u-loadmore :status="status" :loading-text="loadingText" :loadmore-text="loadmoreText" :nomore-text="nomoreText" /> </template> <script> export default { data() { return { status: 'loadmore', loadingText: '努力加载中', loadmoreText: '轻轻上拉', nomoreText: '实在没有了' } } } </script>
✅ Copy success!
# 线条自定义颜色和设置为虚线 2.0.32
- 可以通过配置
dashed
和lineColor
实现,见如下:
<template> <u-loadmore loadmoreText="看,我和别人不一样" color="#1CD29B" lineColor="#1CD29B" dashed line /> </template> <script> export default { data() { return { status: 'loadmore', loadingText: '努力加载中', loadmoreText: '轻轻上拉', nomoreText: '实在没有了' } } } </script>
✅ Copy success!
# 手动触发加载更多
有时候可能会因为网络,或者数据不满一页的原因,导致无法上拉触发onReachBottom
生命周期,这时候(需status
为loadmore
状态),用户点击组件,就会触发loadmore
事件,可以在回调中,进行状态的控制和数据的加载,同时也可以修改loadText
的loadmore
为"上拉或点击加载更多"进行更加人性化的提示。
# 此页面源代码地址
# API
# Props
参数 | 说明 | 类型 | 默认值 | 可选值 |
---|---|---|---|---|
status | 组件状态 | String | loadmore | loading / nomore |
bgColor | 组件背景颜色,在页面是非白色时会用到(默认为transparent) | String | transparent | - |
icon | 加载中时是否显示图标 | Boolean | true | false |
fontSize | 字体大小,单位rpx | String | Number | 14 | - |
iconSize | 图标大小,单位px | String | Number | 17 | - |
color | 字体颜色 | String | #606266 | - |
loadingIcon | 加载中状态的图标 | String | circle | spinner / semicircle |
loadmoreText | 加载前的提示语 | String | 加载更多 | - |
loadingText | 加载中提示语 | String | 正在加载... | - |
nomoreText | 没有更多的提示语 | String | 没有更多了 | - |
isDot | status 为nomore 时,内容显示为一个"●" | Boolean | false | true |
iconColor | 加载中的动画图标的颜色 | String | #b7b7b7 | - |
lineColor 2.0.32 | 线条颜色 | String | #E6E8EB | - |
dashed 2.0.32 | 是否虚线,false-实线,true-虚线 | Boolean | false | true |
marginTop | 与前一个元素的距离,单位rpx | String | Number | 10 | - |
marginBottom | 与后一个元素的距离,单位rpx | String | Number | 10 | - |
height | 高度 | String | Number | auto | - |
line | 是否显示左边分割线 | Boolean | false | true |
# Event
事件名 | 说明 | 回调参数 | 版本 |
---|---|---|---|
loadmore | status 为loadmore 时,点击组件会发出此事件 | - | - |