vue2滚动条加载更多数据实现代码


Posted in Javascript onJanuary 10, 2017

解析:

判断滚动条到底部,需要用到DOM的三个属性值,即scrollTop、clientHeight、scrollHeight。

scrollTop为滚动条在Y轴上的滚动距离。

clientHeight为内容可视区域的高度。

scrollHeight为内容可视区域的高度加上溢出(滚动)的距离。

从这个三个属性的介绍就可以看出来,滚动条到底部的条件即为scrollTop + clientHeight == scrollHeight。(兼容不同的浏览器)。

代码:

1.vue的实现

html:

<div class="questionList-content-list">
   <ul>
    <li v-for="item in questionListData" @click="goDetail(item.id)">
     {{item.create_time}}
     [{{item.level_value}}]
    {{item.description}}
     {{item.status_value}}
    </li>
   </ul>
  </div>

js:

created () {
   var self = this
   $(window).scroll(function () {
    let scrollTop = $(this).scrollTop()
    let scrollHeight = $(document).height()
    let windowHeight = $(this).height()
    if (scrollTop + windowHeight === scrollHeight) {
     self.questionListData.push({
      'id': '62564AED8A4FA7CCDBFBD0F9A11C97A8',
      'type': '0102',
      'type_value': '数据问题',
      'description': '撒的划分空间撒电话费看见爱上对方见客户速度快解放哈萨克接电话发生的划分空间是的哈副科级哈师大空间划分可接受的后方可抠脚大汉房间卡收到货放假多少',
      'status': '0',
      'status_value': '未解决',
      'level': '0203',
      'level_value': '高',
      'content': '过好几个号',
      'userid': 'lxzx_hdsx',
      'create_time': 1480296174000,
      'images': null
     })
     self.questionListData.push({
      'id': 'D679611152737E675984D7681BC94F16',
      'type': '0101',
      'type_value': '需求问题',
      'description': 'a阿斯顿发生丰盛的范德萨范德萨发十多个非官方阿道夫葛根粉v跟下载v',
      'status': '0',
      'status_value': '未解决',
      'level': '0203',
      'level_value': '高',
      'content': '秩序性支出V型从v',
      'userid': 'lxzx_hdsx',
      'create_time': 1480296155000,
      'images': null
     })
     self.questionListData.push({
      'id': 'B5C61D990F962570C34B8EE607CA1384',
      'type': '0104',
      'type_value': '页面问题',
      'description': '回复的文本框和字体有点丑',
      'status': '0',
      'status_value': '未解决',
      'level': '0203',
      'level_value': '高',
      'content': '回复的文本框和字体有点丑',
      'userid': 'lxzx_hdsx',
      'create_time': 1480064620000,
      'images': null
     })
     self.questionListData.push({
      'id': '279F9571CB8DC36F1DEA5C8773F1793C',
      'type': '0103',
      'type_value': '设计问题',
      'description': '设计bug,不应该这样设计。',
      'status': '0',
      'status_value': '未解决',
      'level': '0204',
      'level_value': '非常高',
      'content': '设计bug,不应该这样设计。你看。',
      'userid': 'lxzx_hdsx',
      'create_time': 1480064114000,
      'images': null
     })
     self.questionListData.push({
      'id': '80E365710CB9157DB24F08C8D2039473',
      'type': '0102',
      'type_value': '数据问题',
      'description': '数据列表滚动条问题',
      'status': '0',
      'status_value': '未解决',
      'level': '0202',
      'level_value': '中',
      'content': '数据列表在数据条数比较多的情况下无滚动条',
      'userid': 'lxzx_hdsx',
      'create_time': 1480034606000,
      'images': null
     })
     console.log(self.questionListData)
    }
   })
  },

因为vue2 实现了m-v双向绑定,所以这里直接改变for循环数据源即可实现列表的数据刷新;

2: 普通js的实现

html:

<div id="content" style="height:960px" class="questionList-content-list"> 
<ul> 


<li class="list"> 

 <span测试1</span>
     <span>测试2</span>
     <span>测试3</span>
     <span>测试4</span>
     <span>测试5</span>
     <span>测试6</span>
     <span>测试7</span>
     <span>测试8</span>
     <span>测试9</span>
     <span>测试10</span>
     <span>测试11</span>


</li> 

</ul> 
</div>

js:

var html = ''       //距下边界长度/单位px
  $(window).scroll(function () {
   var scrollTop = $(this).scrollTop();
   var scrollHeight = $(document).height();
   var windowHeight = $(this).height();
   if (scrollTop + windowHeight == scrollHeight) {
    for(let i=0;i<10;i++){
     html += '<li>Page: ' + i + ', Data Index: ' + i + ' </li>'
    }
    $('#content ul').append(html);
   }
  });

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript在IE下设置innerHTML时出现未知的运行时错误的解决方法
Jan 12 Javascript
JS 实现BASE64_ENCODE和BASE64_DECODE(实例代码)
Nov 13 Javascript
关于JavaScript命名空间的一些心得
Jun 07 Javascript
this,this,再次讨论javascript中的this,超全面(经典)
Jan 05 Javascript
Bootstrap安装环境配置教程分享
May 27 Javascript
jquery操作checkbox火狐下第二次无法勾选的解决方法
Oct 10 Javascript
微信小程序 定义全局数据、函数复用、模版等详细介绍
Oct 27 Javascript
微信小程序 网络API 上传、下载详解
Nov 09 Javascript
ES6关于Promise的用法详解
May 07 Javascript
深入理解与使用keep-alive(配合router-view缓存整个路由页面)
Sep 25 Javascript
mpvue+vuex搭建小程序详细教程(完整步骤)
Sep 30 Javascript
vuex存储token示例
Nov 11 Javascript
简单实现IONIC购物车功能
Jan 10 #Javascript
微信小程序组件 contact-button(客服会话按钮)详解及实例代码
Jan 10 #Javascript
原生js实现水平方向无缝滚动
Jan 10 #Javascript
vue组件实例解析
Jan 10 #Javascript
bootstrap table分页模板和获取表中的ID方法
Jan 10 #Javascript
React实现点击删除列表中对应项
Jan 10 #Javascript
微信小程序 radio单选框组件详解及实例代码
Jan 10 #Javascript
You might like
php session安全问题分析
2011/06/24 PHP
破解.net程序(dll文件)编译和反编译方法
2013/01/31 PHP
php 中文字符串首字母的获取函数分享
2013/11/04 PHP
PHP闭包函数传参及使用外部变量的方法
2016/03/15 PHP
通过chrome浏览器控制台(Console)进行PHP Debug的方法
2016/10/19 PHP
php使用curl伪造来源ip和refer的方法示例
2018/05/08 PHP
Thinkphp5+plupload实现的图片上传功能示例【支持实时预览】
2019/05/08 PHP
extjs 学习笔记(二) Ext.Element类
2009/10/13 Javascript
xml转json的js代码
2012/08/28 Javascript
html文本框提示效果的示例代码
2014/06/28 Javascript
require.js深入了解 require.js特性介绍
2014/09/04 Javascript
jQuery实现带滚动线条导航效果的方法
2015/01/30 Javascript
判断访客终端类型集锦
2015/06/05 Javascript
jQuery中attr()与prop()函数用法实例详解(附用法区别)
2015/12/29 Javascript
javascript事件模型介绍
2016/05/31 Javascript
jQuery设置Easyui校验规则(推荐)
2016/11/21 Javascript
AngularJS中的缓存使用
2017/01/11 Javascript
使用vue.js2.0 + ElementUI开发后台管理系统详细教程(二)
2017/01/21 Javascript
vue+iview+less 实现换肤功能
2018/08/17 Javascript
基于JS实现前端压缩上传图片的实例代码
2019/05/14 Javascript
bootstrap-treeview实现多级树形菜单 后台JSON格式如何组织?
2019/07/26 Javascript
python集合类型用法分析
2015/04/08 Python
Python中输出ASCII大文字、艺术字、字符字小技巧
2015/04/28 Python
使用Turtle画正螺旋线的方法
2017/09/22 Python
PyQt5实现从主窗口打开子窗口的方法
2019/06/19 Python
Python 调用 Outlook 发送邮件过程解析
2019/08/08 Python
使用Python爬虫库BeautifulSoup遍历文档树并对标签进行操作详解
2020/01/25 Python
tensorflow 查看梯度方式
2020/02/04 Python
Python爬虫如何应对Cloudflare邮箱加密
2020/06/24 Python
美味咖啡的顶级烘焙师:Cafe Britt
2018/03/15 全球购物
Black Halo官方网站:购买连衣裙、礼服和连体裤
2018/06/13 全球购物
Java面向对象面试题
2016/12/26 面试题
老教师工作总结的自我评价
2013/09/27 职场文书
影视广告专业求职信
2014/09/02 职场文书
CSS3 制作精美的定价表
2021/04/06 HTML / CSS
Python制作一个随机抽奖小工具的实现
2021/07/07 Python