vue2怎么实现滚动条加载更多数据-营山大橙子建站

新闻中心

这里有您想知道的互联网营销解决方案

vue2怎么实现滚动条加载更多数据

这篇文章主要介绍“vue2怎么实现滚动条加载更多数据”，在日常操作中，相信很多人在vue2怎么实现滚动条加载更多数据问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”vue2怎么实现滚动条加载更多数据”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！

让客户满意是我们工作的目标，不断超越客户的期望值来自于我们对这个行业的热爱。我们立志把好的技术通过有效、简单的方式提供给客户，将通过不懈努力成为客户在信息化领域值得信任、有价值的长期合作伙伴，公司提供的服务项目有：域名申请、网络空间、营销软件、网站建设、南和网站维护、网站推广。

解析：

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

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

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

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

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

代码：

1.vue的实现

html:


   
    
     {{item.create_time}}
     [{{item.level_value}}]
    {{item.description}}
     {{item.status_value}}

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：

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 += 'Page: ' + i + ', Data Index: ' + i + ' '
    }
    $('#content ul').append(html);
   }
  });

到此，关于“vue2怎么实现滚动条加载更多数据”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注创新互联网站，小编会继续努力为大家带来更多实用的文章！

新闻标题：vue2怎么实现滚动条加载更多数据
本文地址：http://scyingshan.cn/article/jecesi.html

新闻中心

其他资讯