vue实现的上拉加载更多数据/分页功能示例


Posted in Javascript onMay 25, 2019

本文实例讲述了vue实现的上拉加载更多数据/分页功能。分享给大家供大家参考,具体如下:

加载状态

<div v-if='has_log == 0'>
   <load-more tip="上拉加载" :show-loading="false" background-color="#fbf9fe"></load-more>
  </div>
  <div v-if='has_log == 1'>
   <load-more tip="正在加载" :show-loading="true"></load-more>
  </div>
  <div v-if='has_log == 2'>
    <load-more tip="没有更多数据了" :show-loading="false" background-color="#fbf9fe"></load-more>
  </div>

js

export default {
 name: '',
 data () {
  return {
   list: [],
   now_item: '',
   current_index: 0,
   list_param: {page: 1},
   no_data: false,
   has_log: 0
  }
 },
 components: {
  XInput
 },
 created () {
  this.get('/api/index/index', this.list_param).then((data) => {
   this.list = data.data.data
   this.list_param.page += 1
  })
  window.addEventListener('scroll', this.onScroll)
 },
 methods: {
  onScroll () {
   this.has_log = 1
   let innerHeight = document.querySelector('#app').clientHeight
   let outerHeight = document.documentElement.clientHeight
   let scrollTop = document.documentElement.scrollTop
   // console.log(innerHeight + ' ' + outerHeight + ' ' + scrollTop)
   // console.log(outerHeight + scrollTop - 30)
   // console.log(innerHeight)
   if (outerHeight + scrollTop === innerHeight + 57) {
    if (this.no_data === true) {
     this.has_log = 2
     return false
    }
    this.get('/api/index/index', this.list_param).then((data) => {
     if (data.data.data.length > 0) {
      this.list = [...this.list, ...data.data.data]
      this.list_param.page = this.list_param.page + 1
      this.has_log = 0
     } else {
      this.has_log = 2
      this.no_data = true
     }
    })
   }
  }
 }
}

希望本文所述对大家vue.js程序设计有所帮助。

Javascript 相关文章推荐
javascript web页面刷新的方法收集
Jul 02 Javascript
禁用页面部分JavaScript方法的具体实现
Jul 31 Javascript
jquery选择器之基本过滤选择器详解
Jan 27 Javascript
基于jquery实现的可编辑下拉框实现代码
Aug 02 Javascript
jQuery实现首页图片淡入淡出效果的方法
Jun 10 Javascript
Google 地图事件实例讲解
Aug 06 Javascript
详解AngularJs中$resource和restfu服务端数据交互
Sep 21 Javascript
Vue中保存用户登录状态实例代码
Jun 07 Javascript
layui table 获取分页 limit的方法
Sep 20 Javascript
jquery实现的放大镜效果示例
Feb 24 jQuery
js实现带箭头的进度流程
Mar 26 Javascript
使用npm命令提示: 'npm' 不是内部或外部命令,也不是可运行的程序的处理方法
May 14 Javascript
vue实现的请求服务器端API接口示例
May 25 #Javascript
Vue Autocomplete 自动完成功能简单示例
May 25 #Javascript
泛谈JS逻辑判断选择器 || &amp;&amp;
May 24 #Javascript
了解JavaScript中的选择器
May 24 #Javascript
Javascript通过控制类名更改样式
May 24 #Javascript
redux.js详解及基本使用
May 24 #Javascript
javascript获取元素的计算样式
May 24 #Javascript
You might like
PHP 删除一个目录及目录下的所有文件的函数代码
2010/05/26 PHP
PHP获取一年中每个星期的开始和结束日期的方法
2015/02/12 PHP
php实现指定字符串中查找子字符串的方法
2015/03/17 PHP
php中header设置常见文件类型的content-type
2015/06/23 PHP
thinkphp3.x中cookie方法的用法分析
2016/05/19 PHP
PHP编程实现脚本异步执行的方法
2017/08/09 PHP
php nginx 实时输出的简单实现方法
2018/01/21 PHP
jquery 插件学习(二)
2012/08/06 Javascript
jQuery旋转插件—rotate支持(ie/Firefox/SafariOpera/Chrome)
2013/01/16 Javascript
JavaScript数组去重的6个方法
2017/01/21 Javascript
利用js判断手机是否安装某个app的多种方案
2017/02/13 Javascript
关于JavaScript的单双引号嵌套问题
2017/08/20 Javascript
Angular2.0/4.0 使用Echarts图表的示例代码
2017/12/07 Javascript
Angular6封装http请求的步骤详解
2018/08/13 Javascript
koa2实现登录注册功能的示例代码
2018/12/03 Javascript
[00:43]DOTA2小紫本全民票选福利PA至宝全方位展示
2014/11/25 DOTA
[01:02:02]DOTA2上海特级锦标赛A组败者赛 EHOME VS CDEC第二局
2016/02/25 DOTA
python实现ip查询示例
2014/03/26 Python
Python查询阿里巴巴关键字排名的方法
2015/07/08 Python
python使用matplotlib绘图时图例显示问题的解决
2017/04/27 Python
解决Python的str强转int时遇到的问题
2018/04/09 Python
python字符串string的内置方法实例详解
2018/05/14 Python
python实现验证码识别功能
2018/06/07 Python
linux安装Python3.4.2的操作方法
2018/09/28 Python
pytorch中nn.Conv1d的用法详解
2019/12/31 Python
django配置app中的静态文件步骤
2020/03/27 Python
css3media响应式布局实例
2016/07/08 HTML / CSS
美国首屈一指的礼品篮供应商:GiftTree
2018/01/06 全球购物
数控技术与应用毕业生自荐信
2013/09/24 职场文书
公司爱心捐款倡议书
2014/05/14 职场文书
学校综治宣传月活动总结
2014/07/02 职场文书
个人作风建设剖析材料
2014/10/11 职场文书
2015年主婚人婚礼致辞
2015/07/28 职场文书
《天使的翅膀》读后感3篇
2019/12/20 职场文书
Mysql systemctl start mysqld报错的问题解决
2021/06/03 MySQL
使用Cargo工具高效创建Rust项目
2022/08/14 Javascript