实现一个简单的vue无限加载指令方法


Posted in Javascript onJanuary 10, 2017

vue 中的自定义指令是对底层 dom 进行操作,下面以实现滚动到底部加载数据,实现无限加载来介绍如何自定义一个简单的指令。

无限加载的原理是通过对滚动事件的监听,每一次滚动都要获取到已滚动的距离,如果滚动的距离加上浏览器窗口高度,会大于等于内容高度,就触发函数加载数据。

先介绍不使用 vue 的情况如何实现无限加载。

不使用框架

首先是html:

<!DOCTYPE html><html lang="en">
<head><meta charset="UTF-8">
<title>实现滚动加载</title>
<style>
 * {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  }
 li, ul {
  list-style: none;
 }
 .container {
  width: 980px;
  margin: 0 auto;
 }
 .news__item {
  height: 80px;
  margin-bottom: 20px;
  border: 1px solid #eee;
 }</style>
</head>
<body>
<div class="container">
 <ul class="news" id="news">
  <li class="news__item">1、hello world</li>
  <li class="news__item">2、hello world</li>
  <li class="news__item">3、hello world</li>
  <li class="news__item">4、hello world</li>
  <li class="news__item">5、hello world</li>
  <li class="news__item">6、hello world</li>
  <li class="news__item">7、hello world</li>
  <li class="news__item">8、hello world</li>
  <li class="news__item">9、hello world</li>
  <li class="news__item">10、hello world</li>
 </ul>
</div>
</body>
</html>

打开浏览器,调整下浏览器窗口高度,让页面可以滚动。

先了解三个变量

  • document.body.scrollTop 滚动条滚动的距离
  • window.innerHeight 浏览器窗口高度
  • document.body.clientHeight 内容高度

对应上面的原理就是

window.addEventListener('scroll', function() {
 var scrollTop = document.body.scrollTop;
 if(scrollTop + window.innerHeight >= document.body.clientHeight) {
  // 触发加载数据    
  loadMore();
 }
});
function loadMore() {
 console.log('加载数据')'
}

loadMore() 函数就是从接口获取到数据,组装 html,插入到原先到节点后面。

// 表示列表的序号
var index = 10;
function loadMore() {
 var content = '';
 for(var i=0; i< 10; i++) {
  content += '<li class="news__item">'+(++index)+'、hello world</li>'  
 }
 var node = document.getElementById('news');
 // 向节点内插入新生成的数据  
 var oldContent =   node.innerHTML;
 node.innerHTML = oldContent+content;
}

这样就实现了无限加载。

在 vue 中使用指令实现

为什么要用指令实现呢?好像只有指令是可以获取到底层 dom 的?而实现无限加载,是需要拿到内容高度的。

首先初始化一个项目,添加一个组件,用来显示列表。

// components/Index.vue
<template>
 <div>
  <ul class="news">
   <li class="news__item" v-for="(news, index) in newslist">
    {{index}}-{{news.title}}
   </li>
  </ul>
 </div>
</template>
<style>
 .news__item {
  height: 80px;
  border: 1px solid #ccc;
  margin-bottom: 20px;
 }
</style>
<script>
 export default{
  data(){
   return{
    newslist: [
     {title: 'hello world'},
     {title: 'hello world'},
     {title: 'hello world'},
     {title: 'hello world'},
     {title: 'hello world'},
     {title: 'hello world'},
     {title: 'hello world'},
     {title: 'hello world'},
     {title: 'hello world'},
     {title: 'hello world'}
    ]
   }
  }
 }
</script>

OK,现在开始编写指令。从传统实现中,我们了解到要注册对滚动事件对监听,同时拿到内容高度。

directives: {
 scroll: {
  bind: function (el, binding){
   window.addEventListener('scroll', ()=> {
    if(document.body.scrollTop + window.innerHeight >= el.clientHeight) {
     console.log('load data');
    }
   })
  }
 }
}

首先是在组件内注册了 scroll 指令,然后在指令第一次绑定到组件时,也就是对应着 bind钩子,注册滚动监听。

钩子函数就是一些生命周期改变时会调用的函数。bind 在第一次绑定到组件时调用、unbind 在指令与组件解绑时调用。

还可以注意到 bind 对应到函数有两个参数,el 和 binding,这是钩子函数参数,比如 el 对应绑定的节点,binding 有很多数据,比如传给指令的参数等。

下面的el.clientHeight就是表示获取绑定指令的这个节点的内容高度。

和之前一样,判断滚动的高度加上窗口高度是否大于内容高度。

绑定指令到节点上:

<template>
 <div v-scroll="loadMore">
  <ul class="news">
   <li class="news__item" v-for="(news, index) in newslist">
    {{index}}-{{news.title}}
   </li>
  </ul>
 </div>
</template>

可以看到给指令传了一个值,这个值就是加载数据的函数:

methods: {
 loadMore() {
  let newAry = [];
  for(let i = 0; i < 10; i++) {
   newAry.push({title: 'hello world'})
  }
  this.newslist = [...this.newslist, ...newAry];
 }
}

当然,现在在滚动到底部时,只会打印load data,只要把这里改成调用函数就OK了:

window.addEventListener('scroll', ()=> { 
 if(document.body.scrollTop + window.innerHeight >= el.clientHeight) {  
  let fnc = binding.value;  
  fnc(); 
 }
})

v-scroll="loadMore"的 loadMore可以在钩子函数参数的 binding 上拿到。

至此,一个简单的指令就完成了。

优化

上面的例子并没有真正从接口获取数据,所以存在一个隐藏的 bug:当接口响应很慢的情况,滚动到底部正在加载数据时,稍微滚动一下仍会触发获取数据函数,这会造成同时请求多次接口,一次性返回大量数据。

解决办法是添加一个全局变量 scrollDisable,当第一次触发加载数据函数时,将该值设置为 true,根据该值判断是否要执行加载函数。

以普通实现为例:

var scrollDisable = false;
window.addEventListener('scroll', function() {
 var scrollTop = document.body.scrollTop;
 if(scrollTop + window.innerHeight >= document.body.clientHeight) {
  // 触发加载数据    
  if(!scrollDisable) {
   // 
   loadMore(); 
  } 
 }
});
// 表示列表的序号
var index = 10;
function loadMore() {
  // 开始加载数据,就不能再次触发这个函数了
 scrollDisable = true;
 var content = '';
 for(var i=0; i< 10; i++) {
  content += '<li class="news__item">'+(++index)+'、hello world</li>'  
 }
 var node = document.getElementById('news');
 // 向节点内插入新生成的数据  
 var oldContent =   node.innerHTML;
 node.innerHTML = oldContent+content;
 // 插入数据完成后  
 scrollDisable = false;
}

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

Javascript 相关文章推荐
JavaScript Tips 使用DocumentFragment加快DOM渲染速度
Jun 28 Javascript
关于innerHTML后丢失动态绑定的EVENT问题解决方法
May 19 Javascript
jQuery内容过滤选择器用法分析
Feb 10 Javascript
JavaScript计算两个日期时间段内日期的方法
Mar 16 Javascript
JavaScript实现把数字转换成中文
Jun 29 Javascript
使用AJAX实现Web页面进度条的实例分享
May 06 Javascript
Bootstrap 网站实例之单页营销网站
Oct 20 Javascript
微信小程序 两种为对象属性赋值的方式详解
Feb 23 Javascript
关于js中的鼠标事件总结
Jul 11 Javascript
微信小程序实现长按删除图片的示例
May 18 Javascript
ligerUI的ligerDialog关闭刷新的方法
Sep 27 Javascript
JavaScript中的Proxy对象
Nov 27 Javascript
微信小程序 input输入框详解及简单实例
Jan 10 #Javascript
微信小程序 form组件详解及简单实例
Jan 10 #Javascript
微信小程序  checkbox组件详解及简单实例
Jan 10 #Javascript
使用vue.js实现联动效果的示例代码
Jan 10 #Javascript
jQuery插件ajaxFileUpload使用详解
Jan 10 #Javascript
微信小程序 Button 组件详解及简单实例
Jan 10 #Javascript
jQuery zTree树插件简单使用教程
Jan 10 #Javascript
You might like
ThinkPHP结合ajax、Mysql实现的客户端通信功能代码示例
2014/06/23 PHP
PHP的pcntl多进程用法实例
2015/03/19 PHP
Laravel框架基础语法与知识点整理【模板变量、输出、include引入子视图等】
2019/12/03 PHP
setTimeout 不断吐食CPU的问题分析
2009/04/01 Javascript
JavaScript 变量基础知识
2009/11/07 Javascript
javascript学习笔记(十九) 节点的操作实现代码
2012/06/20 Javascript
javascript实现焦点滚动图效果 具体方法
2013/06/24 Javascript
jquery验证表单中的单选与多选实例
2013/08/18 Javascript
JS中表单的使用小结
2014/01/11 Javascript
js数值和和字符串进行转换时可以对不同进制进行操作
2014/03/05 Javascript
javascript实现相同事件名称,不同命名空间的调用方法
2015/06/26 Javascript
12个超实用的JQuery代码片段
2015/11/02 Javascript
最简单纯JavaScript实现Tab标签页切换的方式(推荐)
2016/07/25 Javascript
微信小程序  action-sheet详解及实例代码
2016/11/09 Javascript
js控制台输出的方法(详解)
2016/11/26 Javascript
关于vue.js过渡css类名的理解(推荐)
2017/04/10 Javascript
jQuery.Ajax()的data参数类型详解
2017/07/23 jQuery
详解React开发必不可少的eslint配置
2018/02/05 Javascript
vue watch监听对象及对应值的变化详解
2018/02/24 Javascript
Node.js log4js日志管理详解
2018/07/31 Javascript
vue中引入第三方字体文件的方法示例
2018/12/17 Javascript
[05:26]TI10典藏宝瓶套装外观展示
2020/07/03 DOTA
Python使用 Beanstalkd 做异步任务处理的方法
2018/04/24 Python
keras使用Sequence类调用大规模数据集进行训练的实现
2020/06/22 Python
Shopee马来西亚:随拍即卖,最佳行动电商拍卖平台
2017/06/05 全球购物
Linux上比较文件的命令都有哪些
2013/09/28 面试题
医药个人求职信范文
2014/01/29 职场文书
人事专员工作职责
2014/02/22 职场文书
党员岗位承诺口号大全
2014/03/28 职场文书
绿色环保口号
2014/06/12 职场文书
党的群众路线教育实践活动制度建设计划方案
2014/10/31 职场文书
寒假安全保证书
2015/02/28 职场文书
创业计划书之韩国烧烤店
2019/09/19 职场文书
HTML中table表格拆分合并(colspan、rowspan)
2021/04/07 HTML / CSS
如何在CocosCreator里画个炫酷的雷达图
2021/04/16 Javascript
Python基础之操作MySQL数据库
2021/05/06 Python