专栏首页web秀VUE指令:无限上拉加载更多插件

VUE指令:无限上拉加载更多插件

前言

无限上拉加载更多,在很多场景都有使用,无论是PC还是移动端,尤其是移动端,都应用非常广泛,比如掘金、头条等。 都知道,无论是下拉,亦或是上拉,都是基于滚动条的位置而言的,如果滚动条触底,表示需要加载更多了,而触顶,再次下拉,表示刷新。看个简单的代码示例:

let list = []
let pageSize = 10
let pageNo = 1
// 刷新
function refresh(){
  list = []
  pageNo = 1;
  loadMore()
}
// 加载更多
function loadMore(){
  for(let i = (pageNo - 1) * 10 + 1; i <= pageNo * pageSize; i++) {
    list.push(i)
  }
  pageNo++
  console.log(list)
}

loadMore()
// [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
loadMore()
// [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20]
...

refresh()
// [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

这里简单模拟了一个分页,pageNo当前页码,pageSize每页大小。下面我们来具体实现vue如何通过指令来完成无限上拉加载更多功能的。

InfiniteScroll.js

v-infinite-scroll指令,主要来监听添加指令元素的滚动事件,根据条件,来执行加载更多事件

export default {
  bind(el, binding) {
    let target = el;
    if (el.getAttribute('data-scrollTarget')) {
      target = el.querySelector(el.getAttribute('data-scrollTarget'));
    }
    target.addEventListener('scroll', e => {
      const busy = el.getAttribute('data-infiniteScrollDisabled') ? false : true;
      const distance = el.getAttribute('data-infiniteScrollDistance')
        ? Number.parseInt(el.getAttribute('data-infiniteScrollDistance'), 10)
        : 100;
      if (!busy && e.target.scrollHeight - (e.target.scrollTop + e.target.clientHeight) < distance) {
        el.setAttribute('data-infiniteScrollDisabled', true);
        binding.value(e);
      }
    });
  },
};

InfiniteScrollDisabled.js

v-infinite-scroll-disabled指令,用来控制是否可以加载更多,比如正在加载,此时就不需要重复执行了

export default {
  bind(el, binding) {
    el.setAttribute('data-infiniteScrollDisabled', binding.value);
  },
  update(el, binding) {
    el.setAttribute('data-infiniteScrollDisabled', binding.value);
  },
};

InfiniteScrollDistance.js

v-infinite-scroll-distance指令,用来控制满足触底距离,不一定非得完全触底才加载更多,比如距离底部还有10px,就可以加载更多了

export default {
  bind(el, binding) {
    el.setAttribute('data-infiniteScrollDistance', binding.value);
  },
  update(el, binding) {
    el.setAttribute('data-infiniteScrollDistance', binding.value);
  },
};

挂载指令index.js

import InfiniteScroll from './InfiniteScroll';
import InfiniteScrollDisabled from './InfiniteScrollDisabled';
import InfiniteScrollDistance from './InfiniteScrollDistance';

export default {
  install(Vue, options) {
    const directives = {
      InfiniteScroll,
      InfiniteScrollDisabled,
      InfiniteScrollDistance
    };
    Object.keys(directives).forEach(key => {
      directives[key].$options = options;
      Vue.directive(key, directives[key]);
    });
  },
};

指令使用

<template>
  <div
    class="list" 
    v-infinite-scroll="loadMore"
    v-infinite-scroll-disabled="loading"
    v-infinite-scroll-distance="10"
  >
    <div v-for="item in list"></div>
  </div>
</template>
<script>
import Vue from 'vue'
import scroll from '@/plugs/scroll'
Vue.use(scroll)

export default {
  data () {
    return {
      loading: false,
      list: []
    }
  },
  methods: {
    loadMore () {
      this.loading = true
      xxx.then((data)=>{
        this.list = this.list.concat(data)
        this.loading = false
      }, ()=>{
        this.loading = false
      })
    }
  }
}
</script>

切记:添加指令的元素一定要有滚动条,没有滚动条,一切都是扯淡

这样就简单的实现了,vue无限下拉加载更多插件。当然,你还可以对齐进行美化,加载更多时,可以添加loading样式。比如:

<div
  class="list" 
  v-infinite-scroll="loadMore"
  v-infinite-scroll-disabled="loading"
  v-infinite-scroll-distance="10"
>
  <div v-for="item in list"></div>
  <div v-if="loading">loading...</div>
</div>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Todo List: 待办事项自定义分组 – 第三章

    有了前面2章节的内容,相信小伙伴们自己也可以试着写写了,动手后的你们是不是发现很简单了?现在我们继续下一章节的内容,自定义任务分组。

    Javanx
  • CSS3实现3D水晶立方体效果

    前段时间写过一篇《CSS3实现美美哒的图片倒影效果》,里面最后一步,“我们使倒影倾斜一个角度,让整个倒影效果更具有立体效果”,不知道大家有没有联想到用倾斜,我们...

    Javanx
  • JavaScript如何快速排序

    在栗子中的数组执行一次1、2点实现后,你会发现此时执行后出现三个结果 1)letf = [2]; 2)pivot = 3; 3)right = [9, 6...

    Javanx
  • 4.7 服务器上的 Git - GitWeb

    如果你对项目有读写权限或只读权限,你可能需要建立起一个基于网页的简易查看器。 Git 提供了一个叫做 GitWeb 的 CGI 脚本来做这项工作。

    shaonbean
  • 04-老马jQuery教程-DOM节点操作及位置和大小

    DOM时代我们通过document的createElement方法动态创建标签。创建标签后,动态的给他添加属性。例如代码:

    老马
  • Markdown 语法和 MWeb 写作使用说明既然都整理了,捎带手把这个也整理了吧第一级标题<h1>

    既然都整理了,捎带手把这个也整理了吧 快捷键汇总 预览 CMD + R 在 MWeb 中的快捷键为: 标题快捷键:Control + 1 -- Control ...

    Albert陈凯
  • @Autowired和@Resource的区别

    用途:做bean的注入时使用 历史:@Autowired        属于Spring的注解                org.springfr...

    似水的流年
  • javascript当中onload用法

    7)onload onload就是等页面加载完后才执行。 例 3.7.1 <HEAD> <meta http-equiv="content-ty...

    马克java社区
  • vue中一些小坑(2)

    好久没写vue代码,时间长了不写都是会生疏或者有些地方会忽略,就像在项目刚开始就碰到了自己注册的header和footer不显示 其实这就是我们忽略了一些问题...

    天天_哥
  • 【系统设计】大神三分钟搞懂领域驱动设计

    今天的企业应用程序无疑是复杂的,并依赖一些专门技术(持久性,AJAX,Web服务等)来完成它们的工作。作为开发人员,我们倾向于关注这些技术细节是可以理解的。但事...

    首席架构师智库

扫码关注云+社区

领取腾讯云代金券