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 相关文章推荐
由prototype_1.3.1进入javascript殿堂-类的初探
Nov 06 Javascript
JS简单实现文件上传实例代码(无需插件)
Nov 15 Javascript
jQuery选择器全面总结
Jan 06 Javascript
js控制input框只读实现示例
Jan 20 Javascript
基于bootstrap插件实现autocomplete自动完成表单
May 07 Javascript
使用jquery获取url及url参数的简单实例
Jun 14 Javascript
jQuery查看选中对象HTML代码的方法
Jun 17 Javascript
浅谈JavaScript中的属性:如何遍历属性
Sep 14 Javascript
原生JavaScript实现的简单放大镜效果示例
Feb 07 Javascript
JavaScript面向对象程序设计中对象的定义和继承详解
Jul 29 Javascript
Vue退出登录时清空缓存的实现
Nov 12 Javascript
JavaScript实现页面高亮操作提示和蒙板
Jan 04 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
《Pokemon Sword·Shield》系列WEB动画《薄明之翼》第2话声优阵容公开!
2020/03/06 日漫
也谈截取首页新闻 - 范例
2006/10/09 PHP
Session服务器配置指南与使用经验的深入解析
2013/06/17 PHP
IIS安装Apache伪静态插件的具体操作图文
2013/07/01 PHP
Composer设置忽略版本匹配的方法
2016/04/27 PHP
PHP实现的解汉诺塔问题算法示例
2018/08/06 PHP
jquery实现不同大小浏览器使用不同的css样式表的方法
2014/04/02 Javascript
Linux下使用jq友好的打印JSON技巧分享
2014/11/18 Javascript
jQuery实现滚动切换的tab选项卡效果代码
2015/08/26 Javascript
jQuery同步提交示例代码
2015/12/12 Javascript
EasyUI布局 高度自适应
2016/06/04 Javascript
原生JS封装ajax 传json,str,excel文件上传提交表单(推荐)
2016/06/21 Javascript
js实现动态创建的元素绑定事件
2016/07/19 Javascript
AngularJS中update两次出现$promise属性无法识别的解决方法
2017/01/05 Javascript
JS实现含有中文字符串的友好截取功能分析
2017/03/13 Javascript
Angular实现响应式表单
2017/08/04 Javascript
vue项目首屏打开速度慢的解决方法
2019/03/31 Javascript
JavaScript学习教程之cookie与webstorage
2019/06/23 Javascript
JavaScript动画实例之粒子文本的实现方法详解
2020/07/28 Javascript
Vue 3.0中jsx语法的使用
2020/11/13 Javascript
[00:35]DOTA2上海特级锦标赛 EG战队宣传片
2016/03/04 DOTA
跟老齐学Python之for循环语句
2014/10/02 Python
基于python 二维数组及画图的实例详解
2018/04/03 Python
解决Python 命令行执行脚本时,提示导入的包找不到的问题
2019/01/19 Python
python解析含有重复key的json方法
2019/01/22 Python
python pexpect ssh 远程登录服务器的方法
2019/02/14 Python
python命令 -u参数用法解析
2019/10/24 Python
python中seaborn包常用图形使用详解
2019/11/25 Python
阿姆斯特丹杜莎夫人蜡像馆官方网站:Madame Tussauds Amsterdam
2019/03/12 全球购物
CHARLES & KEITH台湾官网:新加坡时尚品牌
2019/07/30 全球购物
Python面试题:Python里面如何生成随机数
2015/03/12 面试题
颐和园的导游词
2015/01/30 职场文书
小学少先队活动总结
2015/05/08 职场文书
2016年小学圣诞节活动总结
2016/03/31 职场文书
如何在Python中创建二叉树
2021/03/30 Python
MySQL悲观锁与乐观锁的实现方案
2021/11/02 MySQL