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 相关文章推荐
二行代码解决全部网页木马
Mar 28 Javascript
javascript中使用replaceAll()函数实现字符替换的方法
Dec 25 Javascript
javascript简单实现表格行间隔显示颜色并高亮显示
Nov 29 Javascript
fmt:formatDate的输出格式详解
Jan 09 Javascript
jQuery插件实现控制网页元素动态居中显示
Mar 24 Javascript
javascript 中的 delete及delete运算符
Nov 15 Javascript
jquery对象和DOM对象的相互转换详解
Oct 18 Javascript
Vue组件创建和传值的方法
Aug 17 Javascript
详解Angular6 热加载配置方案
Aug 18 Javascript
使用vue 国际化i18n 实现多实现语言切换功能
Oct 11 Javascript
生产制造追溯系统之在线打印功能
Jun 03 Javascript
javascript实现抢购倒计时程序
Aug 26 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
Windows IIS PHP 5.2 安装与配置方法
2009/06/08 PHP
解析zend Framework如何自动加载类
2013/06/28 PHP
解析PHP 使用curl提交json格式数据
2013/06/29 PHP
ThinkPHP使用心得分享-ThinkPHP + Ajax 实现2级联动下拉菜单
2014/05/15 PHP
php生成数字字母的验证码图片
2015/07/14 PHP
php中简单的对称加密算法实现
2017/01/05 PHP
php 人员权限管理(RBAC)实例(推荐)
2017/05/24 PHP
PHP实现的堆排序算法详解
2017/08/17 PHP
QUnit jQuery的TDD框架
2010/11/04 Javascript
JavaScript中去掉数组中的重复值的实现方法
2011/08/03 Javascript
JavaScript面向对象设计二 构造函数模式
2011/12/20 Javascript
40个新鲜出炉的jQuery 插件和免费教程[上]
2012/07/24 Javascript
简介JavaScript中的getUTCFullYear()方法的使用
2015/06/10 Javascript
简介JavaScript中Math.LOG10E属性的使用
2015/06/14 Javascript
JS及JQuery对Html内容编码,Html转义
2017/02/17 Javascript
jQuery鼠标悬停内容动画切换效果
2017/04/27 jQuery
jQuery基于随机数解决中午吃什么去哪吃问题示例
2018/12/29 jQuery
微信小程序实现单选选项卡切换效果
2020/06/19 Javascript
小程序实现左滑删除效果
2019/07/25 Javascript
搭建Vue从Vue-cli到router路由护卫的实现
2019/11/14 Javascript
解决element-ui里的下拉多选框 el-select 时,默认值不可删除问题
2020/08/14 Javascript
vue实现点击出现操作弹出框的示例
2020/11/05 Javascript
Python中比较特别的除法运算和幂运算介绍
2015/04/05 Python
Python中的字符串操作和编码Unicode详解
2017/01/18 Python
Python内建函数之raw_input()与input()代码解析
2017/10/26 Python
python如何使用unittest测试接口
2018/04/04 Python
Python Numpy库安装与基本操作示例
2019/01/08 Python
Python下使用Trackbar实现绘图板
2020/10/27 Python
TensorFlow2.0使用keras训练模型的实现
2021/02/20 Python
python爬虫scrapy框架之增量式爬虫的示例代码
2021/02/26 Python
法国综合购物网站:RueDuCommerce
2016/09/12 全球购物
什么是servlet
2012/05/08 面试题
计算机网络毕业生自荐信
2013/10/01 职场文书
俄语专业毕业生推荐信
2013/10/28 职场文书
2014年团支部年度工作总结
2014/12/24 职场文书
10大幻兽系恶魔果实 蝙蝠果实上榜,第一自愈能力强
2022/03/18 日漫