加载更多

提示

页面将使用滚动区域作为主体 ( 高度自动铺满屏幕 )、利用滚动区域触底事件来触发加载;
不适合全屏选项卡形式的加载，如需实现全屏选项卡形式的刷新请点击手册左侧发现解决方案;
内部使用了 page-loadmore 组件;
您也可以使用 page-loadmore 组件在不使用 page-panel 组件的情况下实现各种模式的加载更多;

演示代码

html

<view  class="page-page-loadmore">
  <page-loadmore 
  ref="pageloadmore" 
  :loadMoreText="loadMoreText" 
  :loadMoreColor="loadMoreColor" 
  :loadMoreFontSize="loadMoreFontSize"></page-loadmore>
</view>
<script>
  methods:{
    loadmorefun : function () { 
      //正在请求时不执行
      if(this.apiLoadingStatus){return false;}
      // 获取加载组件状态看一下是否还能继续加载
      // 保证触底只执行一次加载
      if(this.loadMoreTimer != null){clearTimeout(this.loadMoreTimer);}
      this.loadMoreTimer =  setTimeout(() => {
        var status = this.$refs.pageloadmore.loadMoreStatus;
        if(status != 0){return null;}
        this.$refs.pageloadmore.loading();
        this.$emit('loadmorefun');  
      }, 80);
    },
    stoploadmore : function(){
      this.$refs.pageloadmore.stoploadmore();
    },
    nomore : function () {
      this.$refs.pageloadmore.nomore();
    }
  }
</script>

Attributes

参数	说明	类型	默认值
loadMoreText	加载过程中展示的文本	Array	['','更多数据加载中', '已加载全部数据','暂无数据']
loadMoreColor	加载过程中组件的文本颜色	Array	['rgba(69, 90, 100, 0.6)', 'rgba(69, 90, 100, 0.6)', 'rgba(#90827D, 0.6)', 'rgba(69, 90, 100, 0.6)']
loadMoreFontSize	组件文本尺寸	String	26
status	初始化加载状态 0 准备加载 1 加载中 2 加载到底 3 为空展示	Number	0

method

方法	说明
loading()	开启加载动画，用于加载过程
stoploadmore()	停止加载动画，准备下一次加载
nomore()	加载到底，不能进行下一次加载
empty()	第一次加载数据为空,不能进行下一次加载
hide()	关闭组件

Event

事件	说明
tapme	组件被点击时触发给父级

在 GitHub 上编辑此页

上次更新:

加载更多 ​

演示代码 ​

Attributes ​

method ​

Event ​

加载更多

演示代码

Attributes

method

Event