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 document.referrer 用法
Apr 30 Javascript
JQuery获取文本框中字符长度的代码
Sep 29 Javascript
jQuery数据显示插件整合实现代码
Oct 24 Javascript
form表单action提交的js部分与html部分
Jan 07 Javascript
使用jquery实现IE下按backspace相当于返回操作
Mar 18 Javascript
js动态创建标签示例代码
Jun 09 Javascript
jQuery中index()的用法分析
Sep 05 Javascript
jQuery中val()方法用法实例
Dec 25 Javascript
Bootstrap 粘页脚效果
Mar 28 Javascript
JS实现六位字符密码输入器功能
Aug 19 Javascript
JS日期对象简单操作(获取当前年份、星期、时间)
Oct 26 Javascript
微信小程序动态添加分享数据
Jun 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中把错误日志保存在系统日志中(Windows系统)
2015/06/23 PHP
javascript一个无懈可击的实例化XMLHttpRequest的方法
2010/10/13 Javascript
js网页中的(运行代码)功能实现思路
2013/02/04 Javascript
jQuery链使用指南
2015/01/20 Javascript
JavaScript中的splice()方法使用详解
2015/06/09 Javascript
jQuery实现的给图片点赞+1动画效果(附在线演示及demo源码下载)
2015/12/31 Javascript
JavaScript中的原型继承基础学习教程
2016/05/06 Javascript
JSON 对象未定义错误的解决方法
2016/09/29 Javascript
分享5个顶级的JavaScript Ajax组件库
2018/09/16 Javascript
微信小程序使用蓝牙小插件
2019/09/23 Javascript
如何基于JavaScript判断图片是否加载完成
2019/12/28 Javascript
微信小程序实现上传照片代码实例解析
2020/08/04 Javascript
vue.js 输入框输入值自动过滤特殊字符替换中问标点操作
2020/08/31 Javascript
vue 动态组件(component :is) 和 dom元素限制(is)用法说明
2020/09/04 Javascript
Python3安装Scrapy的方法步骤
2017/11/23 Python
vue.js实现输入框输入值内容实时响应变化示例
2018/07/07 Python
python按键按住不放持续响应的实例代码
2019/07/17 Python
python的range和linspace使用详解
2019/11/27 Python
PyCharm无法识别PyQt5的2种解决方法,ModuleNotFoundError: No module named 'pyqt5'
2020/02/17 Python
python 使用递归回溯完美解决八皇后的问题
2020/02/26 Python
python tkinter GUI绘制,以及点击更新显示图片代码
2020/03/14 Python
Python GUI编程学习笔记之tkinter事件绑定操作详解
2020/03/30 Python
基于python实现数组格式参数加密计算
2020/04/21 Python
Python常见反爬虫机制解决方案
2020/06/01 Python
Python实现打包成库供别的模块调用
2020/07/13 Python
python利用paramiko实现交换机巡检的示例
2020/09/22 Python
Python实现异步IO的示例
2020/11/05 Python
安踏官方商城:anta.cn
2019/12/16 全球购物
初二政治教学反思
2014/01/12 职场文书
优秀社区干部事迹材料
2014/02/03 职场文书
小学清明节活动总结
2014/07/04 职场文书
《检阅》教学反思
2016/02/22 职场文书
nginx实现发布静态资源的方法
2021/03/31 Servers
解决Pytorch半精度浮点型网络训练的问题
2021/05/24 Python
Python爬虫实战之爬取携程评论
2021/06/02 Python
Python编写冷笑话生成器
2022/04/20 Python