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 相关文章推荐
ExtJs事件机制基本代码模型和流程解析
Oct 24 Javascript
jquery的trigger和triggerHandler的区别示例介绍
Apr 20 Javascript
DOM节点删除函数removeChild()用法实例
Jan 12 Javascript
JavaScript程序开发之JS代码放置的位置
Jan 15 Javascript
理解javascript中的闭包
Jan 11 Javascript
微信小程序使用checkbox显示多项选择框功能【附源码下载】
Dec 11 Javascript
C#实现将一个字符转换为整数
Dec 12 Javascript
Vue组件库发布到npm详解
Feb 17 Javascript
vue框架搭建之axios使用教程
Jul 11 Javascript
JSON基本语法及与JavaScript的异同实例分析
Jan 04 Javascript
解决layui页面按钮点击无反应,也不报错的问题
Sep 29 Javascript
Vue-cli3多页面配置详解
Mar 22 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中3种生成XML文件方法的速度效率比较
2012/10/06 PHP
php中hashtable实现示例分享
2014/02/13 PHP
PHP实现根据图片色界在不同位置加水印的方法
2015/08/08 PHP
thinkphp5实现微信扫码支付
2019/12/23 PHP
Javascript 函数对象的多重身份
2009/06/28 Javascript
StringTemplate遇见jQuery冲突的解决方法
2011/09/22 Javascript
javascript是怎么继承的介绍
2012/01/05 Javascript
javascript for循环从入门到偏门(效率优化+奇特用法)
2012/08/01 Javascript
使用jquery mobile做幻灯播放效果实现步骤
2013/01/04 Javascript
手机端页面rem宽度自适应脚本
2015/05/20 Javascript
jQuery 判断图片是否加载完成方法汇总
2015/08/10 Javascript
Javascript技术栈中的四种依赖注入小结
2016/02/27 Javascript
vue父子组件的数据传递示例
2017/03/07 Javascript
vue页面使用阿里oss上传功能的实例(一)
2017/08/09 Javascript
微信小程序 POST请求的实例详解
2017/09/29 Javascript
微信小程序实现发送模板消息功能示例【通过openid推送消息给用户】
2019/05/05 Javascript
JavaScript实现图片伪异步上传过程解析
2020/04/10 Javascript
[01:57]2016完美“圣”典风云人物:国士无双专访
2016/12/04 DOTA
TensorFlow实现卷积神经网络
2018/05/24 Python
Django models filter筛选条件详解
2020/03/16 Python
jupyter 实现notebook中显示完整的行和列
2020/04/09 Python
通过实例了解python__slots__使用方法
2020/09/14 Python
python mock测试的示例
2020/10/19 Python
纯css实现照片墙3D效果的示例代码
2017/11/13 HTML / CSS
纯css3实现思维导图样式示例
2018/11/01 HTML / CSS
bareMinerals官网:矿物质化妆品和护肤品
2018/02/04 全球购物
Currentbody德国站:健康与美容技术专家
2020/04/05 全球购物
银行实习的自我鉴定
2013/12/10 职场文书
会计专业毕业生自荐信范文
2013/12/20 职场文书
会计专业个人求职信范文
2014/01/08 职场文书
家长给孩子的表扬信
2014/01/17 职场文书
市场营销毕业生自荐信范文
2014/04/01 职场文书
解除劳动合同协议书
2014/04/14 职场文书
食品流通安全承诺书
2014/05/22 职场文书
教师工作态度自我评价
2015/03/05 职场文书
从事会计工作年限证明
2015/06/23 职场文书