此组件一般用于标识页面底部加载数据时的状态，共有三种状态：
- 加载前，显示"加载更多"，加入点击可选，是因为数据不够一页时，无法触发页面的
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
#控制组件的提示以及动画效果
- 如果不需要图标，可以设置
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
#线条自定义颜色和设置为虚线 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
#手动触发加载更多
有时候可能会因为网络，或者数据不满一页的原因，导致无法上拉触发onReachBottom生命周期，这时候(需status为loadmore状态)，用户点击组件，就会触发loadmore 事件，可以在回调中，进行状态的控制和数据的加载，同时也可以修改loadText的loadmore为"上拉或点击加载更多"进行更加人性化的提示
