uView LoadMore 加载更多

此组件一般用于标识页面底部加载数据时的状态,共有三种状态:

  • 加载前,显示"加载更多",加入点击可选,是因为数据不够一页时,无法触发页面的onReachBottom生命周期
  • 加载中,显示"正在加载...",2种动画可选
  • 加载后,如果还有数据,回到"加载前"状态,否则加载结束,显示"没有更多了"

#平台差异说明

App(vue) App(nvue) H5 小程序

#基本使用

  • 通过status设置组件的状态,加载前值为loadmore,加载中为loading,没有数据为nomore

注意:以下示例仅为模拟效果,实际中请根据自己的逻辑,修改代码的实现






copy

#控制组件的提示以及动画效果

  • 如果不需要图标,可以设置iconfalse
  • 可以设置is-dottrue,在没有数据时,内容显示为一个"●"替代默认的"没有更多了"
  • 可以通过配置loading-text配置提示的文字,该参数为一个对象值,可以修改默认的文字提示,见如下:



copy

#线条自定义颜色和设置为虚线 2.0.32

  • 可以通过配置dashedlineColor实现,见如下:



copy

#手动触发加载更多

有时候可能会因为网络,或者数据不满一页的原因,导致无法上拉触发onReachBottom生命周期,这时候(需statusloadmore状态),用户点击组件,就会触发loadmore 事件,可以在回调中,进行状态的控制和数据的加载,同时也可以修改loadTextloadmore为"上拉或点击加载更多"进行更加人性化的提示

你可能感兴趣的:(vue.js,前端,javascript)