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 相关文章推荐
Sample script that deletes a SQL Server database
Jun 16 Javascript
js获取input长度并根据页面宽度设置其大小及居中对齐
Aug 22 Javascript
JavaScript插件化开发教程 (四)
Jan 27 Javascript
SuperSlide标签切换、焦点图多种组合插件
Mar 14 Javascript
jQuery带进度条全屏图片轮播特效代码分享
Jun 28 Javascript
JS设置手机验证码60s等待实现代码
Jun 14 Javascript
9种改善AngularJS性能的方法
Nov 28 Javascript
解决Vue axios post请求,后台获取不到数据的问题方法
Aug 11 Javascript
微信小程序的注册页面包含倒计时验证码、获取用户信息
May 22 Javascript
使用jQuery实现掷骰子游戏
Oct 24 jQuery
node.js使用http模块创建服务器和客户端完整示例
Feb 10 Javascript
js实现超级玛丽小游戏
Mar 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
建站常用13种PHP开源CMS比较
2009/08/23 PHP
在Windows系统上安装PHP运行环境文字教程
2010/07/19 PHP
一个简单的网页密码登陆php代码
2012/07/17 PHP
解析isset与is_null的区别
2013/08/09 PHP
Windows下的PHP安装pear教程
2014/10/24 PHP
php blowfish加密解密算法
2016/07/02 PHP
Yii使用DeleteAll连表删除出现报错问题的解决方法
2016/07/14 PHP
解决FLASH需要点击激活的代码
2006/12/20 Javascript
JavaScript 常见对象类创建代码与优缺点分析
2009/12/07 Javascript
javascript数组去掉重复
2011/05/12 Javascript
jquery弹窗插件colorbox绑定动态生成元素的方法
2014/06/20 Javascript
JS组件Form表单验证神器BootstrapValidator
2016/01/26 Javascript
详解Angularjs filter过滤器
2016/02/06 Javascript
Bootstrap布局之栅格系统详解
2016/06/13 Javascript
浅谈js中字符和数组一些基本算法题
2016/08/15 Javascript
CSS3 media queries结合jQuery实现响应式导航
2016/09/30 Javascript
jQuery图片瀑布流的简单实现代码
2017/03/15 Javascript
vue 项目常用加载器及配置详解
2018/01/22 Javascript
利用js实现前后台传送Json的示例代码
2018/03/29 Javascript
Nodejs Express 通过log4js写日志到Logstash(ELK)
2018/08/30 NodeJs
浅谈layui数据表格判断问题(加入表单元素),设置单元格样式
2019/10/26 Javascript
python列表的常用操作方法小结
2016/05/21 Python
浅谈Python中用datetime包进行对时间的一些操作
2016/06/23 Python
Python基于递归算法实现的汉诺塔与Fibonacci数列示例
2018/04/18 Python
Python下使用Scrapy爬取网页内容的实例
2018/05/21 Python
python读取txt文件,去掉空格计算每行长度的方法
2018/12/20 Python
python中dict使用方法详解
2019/07/17 Python
pyinstaller打包程序exe踩过的坑
2019/11/19 Python
python 解决tqdm模块不能单行显示的问题
2020/02/19 Python
Python学习之路之pycharm的第一个项目搭建过程
2020/06/18 Python
世界上最大的高分辨率在线图片库:Alamy
2018/07/07 全球购物
大学生个人求职口试自我评价
2014/02/16 职场文书
培训专员岗位职责
2014/02/26 职场文书
个人党性分析材料
2014/12/19 职场文书
心术观后感
2015/06/11 职场文书
gojs实现蚂蚁线动画效果
2022/02/18 Javascript