vue2滚动条加载代码,使用鼠标滚动加载数据的例证_vue

关于用鼠标滚动到某个位置我们就去加载数据,这样的场景与业务需求现在越来越常见,现在来分析下《vue.js
实战》中作者的一个解决策略:

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

解析:

判断滚动条到底部,需要用到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"> 
   
     测试2
     测试3
     测试4
     测试5
     测试6
     测试7
     测试8
     测试9
     测试10
     测试11
    </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);
   }
  });

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

解析:
判断滚动条到底部,需要用到DOM的三个属性值,即scrollTop、clientHeight、scrol…

  1. 设置一个标志位用来判断数据是否在加载中

  2. 将滚动区域设置成 overfow:auto

  3. 给滚动区域加入监听事件并绑定ref属性 来获取DOM实例

  4. 当鼠标滚动到底部时,加载数据

4.1 如果此时 标志位为true则 直接退出,不进行此时数据加载

关键代码如下:

 //...代码省略//该div 为要滚动区域 // ... export default{ data(){ return { recommendList:[], //&#23384;&#25918;&#28378;&#21160;&#21306;&#22495;&#35201;&#26174;&#31034;&#30340;&#25968;&#25454; isLoading:false //&#40664;&#35748;&#27809;&#26377;&#22312;&#21152;&#36733;&#25968;&#25454; } }, methods:{ //&#33719;&#21462;&#25968;&#25454; getRecommendList(){ //&#34920;&#31034;&#27491;&#22312;&#21152;&#36733;&#25968;&#25454; this.isLoading=true; $.ajax.get('news/before/'+preDay).then(res=&gt;{ this.recommendList.push; //&#25968;&#25454;&#35831;&#27714;&#23436;&#25104; this.isLoading=false; }) }, handleScroll(){ const $list=this.$refs.list; //&#22914;&#26524;&#25968;&#25454;&#26377;&#22312;&#21152;&#36733;&#20013;&#21017;&#36825;&#27425;&#35831;&#27714;&#36864;&#20986; if return; //&#24050;&#32463;&#28378;&#21160;&#30340;&#36317;&#31163;&#21152;&#39029;&#38754;&#30340;&#39640;&#24230;&#31561;&#20110;&#25972;&#20010;&#20869;&#23481;&#21306;&#39640;&#24230;&#26102;,&#35270;&#20026;&#25509;&#35302;&#21040;&#24213;&#37096; //scrollTop &#33719;&#21462;&#21040;&#39030;&#37096;&#30340;&#28378;&#21160;&#36317;&#31163; // clientHeight &#34920;&#31034;&#39029;&#38754;&#35270;&#21475;&#39640;&#24230; // scrollHeight &#39029;&#38754;&#20869;&#23481;&#30340;&#39640;&#24230; if($list.scrollTop+document.body.clientHeight&gt;=$list.scrollHeight){ this.getRecommendList{ this.getRecommendList() }} width: 300px; position: fixed; top:0; left: 150px; //出现滚动条 overflow: auto;

以上这篇vue
使用鼠标滚动加载数据的例子就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

发表评论

电子邮件地址不会被公开。 必填项已用*标注