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 的 trim 函数的代码
Aug 13 Javascript
使用Jquery搭建最佳用户体验的登录页面之记住密码自动登录功能(含后台代码)
Jul 10 Javascript
jQuery Ajax 仿AjaxPro.Utility.RegisterTypeForAjax辅助方法
Sep 27 Javascript
解析dom中的children对象数组元素firstChild,lastChild的使用
Jul 10 Javascript
不使用浏览器运行javascript代码的方法
Jul 24 Javascript
javascript实现时间格式输出FormatDate函数
Jan 13 Javascript
js兼容火狐显示上传图片预览效果的方法
May 21 Javascript
使用nvm管理不同版本的node与npm的方法
Oct 31 Javascript
为输入框加入数字js校验代码分享
Nov 02 Javascript
vue2中的keep-alive使用总结及注意事项
Dec 21 Javascript
vue3.0自定义指令(drectives)知识点总结
Dec 27 Vue.js
在 HTML 页面中使用 React的场景分析
Jan 18 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的fsockopen、pfsockopen函数被主机商禁用的解决办法
2014/07/08 PHP
php单态设计模式(单例模式)实例
2014/11/18 PHP
php连接odbc数据源并保存与查询数据的方法
2014/12/24 PHP
PHP Socket网络操作类定义与用法示例
2017/08/30 PHP
PHP SESSION机制的理解与实例
2019/03/22 PHP
Yii2处理密码加密及验证的方法
2019/05/12 PHP
javascript hashtable实现代码
2009/10/13 Javascript
每天一篇javascript学习小结(RegExp对象)
2015/11/17 Javascript
深入浅出讲解ES6的解构
2016/08/03 Javascript
js 创建对象 经典模式全面了解
2016/08/16 Javascript
AngularJs concepts详解及示例代码
2016/09/01 Javascript
js实现交通灯效果
2017/01/13 Javascript
Bootstrap 网格系统布局详解
2017/03/19 Javascript
AngularJS之ionic 框架下实现 Localstorage本地存储
2017/04/22 Javascript
深入理解Vue.js轻量高效的前端组件化方案
2018/12/10 Javascript
微信小程序中使用echarts的实现方法
2019/04/24 Javascript
Vue项目中Api的组织和返回数据处理的操作
2019/11/04 Javascript
[03:46]DOTA2英雄基础教程 维萨吉
2013/12/11 DOTA
python ddt实现数据驱动
2018/03/14 Python
python如何去除字符串中不想要的字符
2020/07/05 Python
python write无法写入文件的解决方法
2019/01/23 Python
django-rest-swagger的优化使用方法
2019/08/29 Python
Python表达式的优先级详解
2020/02/18 Python
Python+redis通过限流保护高并发系统
2020/04/15 Python
Python通过Schema实现数据验证方式
2020/11/12 Python
CSS3 实现时间轴动画
2020/11/25 HTML / CSS
德国亚马逊官方网站:Amazon.de
2020/11/15 全球购物
机电工程专业应届生求职信
2013/10/03 职场文书
校园餐饮创业计划书
2014/01/10 职场文书
劳动实践课感言
2014/02/01 职场文书
三分钟自我介绍演讲稿
2014/08/21 职场文书
维护民族团结演讲稿
2014/08/27 职场文书
2014年幼儿园园务工作总结
2014/12/05 职场文书
初中教师个人总结
2015/02/10 职场文书
听证通知书
2015/04/24 职场文书
python生成可执行exe控制Microsip自动填写号码并拨打功能
2021/06/21 Python