Need help with vue-quick-loadmore?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

duyanpeng
128 Stars 14 Forks MIT License 57 Commits 8 Opened issues

Description

A pull-down refresh and pull-up infinite scroll component for Vue.js.--vue移动端下拉刷新上拉无限滚动加载插件,支持更换加载图片,保存和设置滚动距离等。

Services available

!
?

Need anything else?

Contributors list

# 370,907
JavaScr...
infinit...
Mobile
HTML
39 commits

garen-loadmore

Build Status Read the Docs

vue移动端下拉刷新上拉无限滚动加载插件,支持更换loading图片,保存设置滚动距离等。

默认样式如下,可根据状态更换loading图片或提示文案。

xiaoguozhanshi

文档

更多vue移动端组件,欢迎使用: garen-ui

原vue-quick-loadmore文档:vue-quick-loadmore中文文档

安装


npm install garen-loadmore -S
// 引入方式
import Vue from 'vue';
import GarenLoadmore from 'garen-loadmore';

Vue.use(GarenLoadmore)

示例



API

下拉刷新配置


参数

类型 说明 备注
:disableTop Boolean 禁止下拉刷新 默认:false
:distanceIndex Number 手指滑动与页面滑动比例 默认:2
:topLoadingDistance Number loading状态时页面距顶部距离 默认:50
:topDistance Number 下拉刷新触发值 默认:100
:top-change-text Object 下拉刷新提示文案 见示例代码
@top-method Function 下拉刷新触发方法
@top-status-change Function 下拉刷新状态改变回调 五种状态具体见示例代码

ref.onTopLoaded|Function|下拉刷新完成时调用函数,参数是完成状态等待时间ms|通过ref使用具体见示例代码

上拉加载配置:

参数

类型 说明 备注
:disableBttom Boolean 禁止上拉加载 默认:false
:bottomDistance Number 上拉加载触发值 默认:10
:bottom-change-text Object 上拉加载提示文案 见示例代码
@bottom-method Function 上拉加载触发方法
@bottom-status-change Function 上拉加载状态改变回调 四种状态具体见示例代码
@bottom-error-click Function 数据请求出错点击触发方法
:eventScroll Function scroll事件回调 用于监听scroll事件
ref.onBottomLoaded(boolean = true) Function 上拉加载完成时调用函数 通过ref使用具体见示例代码(注意:如果下拉加载之后是无更多数据状态,函数传参为false,此后不在触发上拉刷新方法,下拉刷新之后会自动开启上拉加载)

ref.onBottomError()|Function|上拉加载出错时调用函数|通过ref使用具体见示例代码

其他配置:

参数

类型 说明 备注
ref.getScrollTop Function 获得滚动距离 具体见示例代码

ref.setScroolTop(y)|Function|设置滚动距离|具体见示例代码

替换下拉刷新下拉加载loading图方法:

    
   

/* 参考自定义样式css */
.garen-loadmore-header {
  margin-top: -50px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  font-size: 14px;
  color: #666666;
  letter-spacing: -0.31px;
}
.garen-loadmore-footer {
  height: 50px;
  line-height: 50px;
  text-align: center;
  font-size: 13px;
  color: #666666;
  letter-spacing: -0.31px;
}  

版本更新说明


版本号

说明
1.0.0 正式版本
0.1.0 项目发布

联系我


QQ群:257216865
邮箱:[email protected]

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.