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 相关文章推荐
用JS实现一个页面多个css样式实现
May 29 Javascript
JS性能优化笔记搜索整理
Aug 21 Javascript
Javascript和Java获取各种form表单信息的简单实例
Feb 14 Javascript
js实现通用的微信分享组件示例
Mar 10 Javascript
Jquery插件分享之气泡形提示控件grumble.js
May 20 Javascript
java、javascript实现附件下载示例
Aug 14 Javascript
使用pcs api往免费的百度网盘上传下载文件的方法
Mar 17 Javascript
基于jQuery实现发送短信验证码后的倒计时功能(无视页面关闭)
Sep 02 Javascript
浅谈原生JS实现jQuery的animate()动画示例
Mar 08 Javascript
如何选择jQuery版本 1.x? 2.x? 3.x?
Apr 01 jQuery
浅谈js-FCC算法Friendly Date Ranges(详解)
Apr 10 Javascript
js实现弹窗效果
Aug 09 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表单提交实例讲解
2015/11/12 PHP
php数据访问之增删改查操作
2016/05/09 PHP
py文件转exe时包含paramiko模块出错解决方法
2016/08/12 PHP
Yii框架参数化查询中IN查询只能查询一个的解决方法
2017/05/20 PHP
Ajax,UTF-8还是GB2312 eval 还是execScript
2008/11/13 Javascript
基于jQuery的日期选择控件
2009/10/27 Javascript
通过JQuery将DIV的滚动条滚动到指定的位置方便自动定位
2014/05/05 Javascript
jquery解决客户端跨域访问问题
2015/01/06 Javascript
jQuery实现的输入框选择时间插件用法实例
2015/02/28 Javascript
最全面的百度地图JavaScript离线版开发
2016/09/10 Javascript
JQuery学习总结【一】
2016/12/01 Javascript
详解使用grunt完成requirejs的合并压缩和js文件的版本控制
2017/03/02 Javascript
Angularjs 1.3 中的$parse实例代码
2017/09/14 Javascript
JS简单获得节点元素的方法示例
2018/02/10 Javascript
小程序云开发部署攻略(图文教程)
2018/10/30 Javascript
如何使用less实现随机下雪动画详解
2019/01/02 Javascript
JS/jQuery实现简单的开关灯效果【案例】
2019/02/19 jQuery
JavaScript数据结构与算法之二叉树添加/删除节点操作示例
2019/03/01 Javascript
react 移动端实现列表左滑删除的示例代码
2019/07/04 Javascript
Vue组件间通信 Vuex的用法解析
2019/08/05 Javascript
js数组相减简单示例【删除a数组所有与b数组相同元素】
2020/03/04 Javascript
Vue 数据响应式相关总结
2021/01/28 Vue.js
深度定制Python的Flask框架开发环境的一些技巧总结
2016/07/12 Python
python爬虫之验证码篇3-滑动验证码识别技术
2019/04/11 Python
Python读取pdf表格写入excel的方法
2021/01/22 Python
CSS3 渐变(Gradients)之CSS3 线性渐变
2016/07/08 HTML / CSS
CSS3 圆角效果
2009/07/15 HTML / CSS
德国体育用品网上商店:SC24.com
2016/08/01 全球购物
市场部规章制度
2014/01/24 职场文书
迟到检讨书300字
2014/02/14 职场文书
有限公司股东合作协议书
2014/10/29 职场文书
2014年财政工作总结
2014/12/10 职场文书
全陪导游词开场白
2015/05/29 职场文书
2016年6月份红领巾广播稿
2015/12/21 职场文书
职场领导同事生日简短祝福语
2019/08/06 职场文书
JavaScript的Set数据结构详解
2022/02/18 Javascript