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 相关文章推荐
用jquery存取照片的具体实现方法
Jun 30 Javascript
javascript 原型链维护和继承详解
Nov 26 Javascript
AngularJS手动表单验证
Feb 01 Javascript
Javascript类型转换的规则实例解析
Feb 23 Javascript
BootStrap Validator使用注意事项(必看篇)
Sep 28 Javascript
vue动态路由实现多级嵌套面包屑的思路与方法
Aug 16 Javascript
基于Vue2.X的路由和钩子函数详解
Feb 09 Javascript
vue初始化动画加载的实例
Sep 01 Javascript
vue自定义底部导航栏Tabbar的实现代码
Sep 03 Javascript
详解Vue-cli3 项目在安卓低版本系统和IE上白屏问题解决
Apr 14 Javascript
jQuery提示框插件SweetAlert用法分析
Aug 05 jQuery
webpack5 联邦模块介绍详解
Jul 08 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如何实现只替换一次或N次
2015/10/29 PHP
JavaScript 学习小结(适合新手参考)
2009/07/30 Javascript
js动态在form上插入enctype=multipart/form-data的问题
2012/05/24 Javascript
js精度溢出解决方案
2012/12/02 Javascript
JSCode all of Brower 全局屏蔽网页右键功能 具体实现
2013/06/05 Javascript
jquery统计复选框选中示例
2013/11/05 Javascript
jQuery动态改变图片显示大小(修改版)的实现思路及代码
2013/12/24 Javascript
JQuery结合CSS操作打印样式的方法
2013/12/24 Javascript
Array 重排序方法和操作方法的简单实例
2014/01/24 Javascript
使用jquery中height()方法获取各种高度大全
2014/04/02 Javascript
js实现可兼容IE、FF、Chrome、Opera及Safari的音乐播放器
2015/02/11 Javascript
JavaScript面向对象之私有静态变量实例分析
2016/01/14 Javascript
livereload工具实现前端可视化开发【推荐】
2016/12/23 Javascript
Vue中的slot使用插槽分发内容的方法
2018/03/01 Javascript
setTimeout与setInterval的区别浅析
2019/03/23 Javascript
Koa 中的错误处理解析
2019/04/09 Javascript
微信小程序的mpvue框架快速上手指南
2019/05/15 Javascript
微信小程序解析富文本过程详解
2019/07/13 Javascript
CountUp.js实现数字滚动增值效果
2019/10/17 Javascript
js实现简易点击切换显示或隐藏
2020/11/29 Javascript
vue+openlayers绘制省市边界线
2020/12/24 Vue.js
Python selenium文件上传方法汇总
2020/11/19 Python
numpy中的高维数组转置实例
2018/04/17 Python
Python Requests库基本用法示例
2018/08/20 Python
解决pycharm的Python console不能调试当前程序的问题
2019/01/20 Python
Python面向对象程序设计之类的定义与继承简单示例
2019/03/18 Python
Python操作MySQL数据库的两种方式实例分析【pymysql和pandas】
2019/03/18 Python
使用python socket分发大文件的实现方法
2019/07/08 Python
基于django micro搭建网站实现加水印功能
2020/05/22 Python
使用python创建Excel工作簿及工作表过程图解
2020/05/27 Python
英国快时尚女装购物网站:PrettyLittleThing
2018/08/15 全球购物
集团公司总经理岗位职责
2013/12/20 职场文书
创业计划书六个要素
2013/12/26 职场文书
2014的自我评价
2014/01/13 职场文书
2021年pycharm的最新安装教程及基本使用图文详解
2021/04/03 Python
一劳永逸彻底解决pip install慢的办法
2021/05/24 Python