手撸一个Vue滚动加载自定义指令

用Vue在移动端做滚动加载,使用mint-ui框架, InfiniteScroll指令loadmore组件,在uc浏览器和qq浏览器都无法触发。无奈我只能自己写了。

决定用vue 的自定义指令 写滚动加载。

核心的api

  • document.body.scrollTop 滚动条滚动的距离 (这个有兼容性问题,兼容性写法)

    let scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
  • window.innerHeight 浏览器窗口高度
  • document.body.clientHeight 内容高度

思路给window绑定滚动事件,用  if(滚动条高度 + 浏览器窗口高度 >= 内容高度 - 阈值)  作为判断条件。我们把自定义指令命名为 scroll

      directives: {
        //滚动加载的自定义指令
        scroll: {
          bind: function(el, binding, vnode) {
              window.addEventListener(‘scroll‘,()=> {
                let scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
                if(scrollTop + window.innerHeight >= el.clientHeight - 50) {
                  //判断请求发送标志位,避免重复请求
                  if(vnode.context.loading) return;

                  //发送请求
                  vnode.context.getnewsData();
                }
              })
          }
        }
      },

有一个重点,因为发送请求的方法定义在了组件的methods中,在自定义指令里,不能通过this拿到Vue实例,而是通过指令钩子函数的第三个参数vnode的context属性拿Vue的实例。

使用 时,直接给容器绑定v-scroll 指令即可

<template>
  <section v-scroll>
    <ul>
      <template v-for="data in data">
        <li>
             ..........
        </li>
      </template>
    </ul>
</section>
</template>

原文地址:https://www.cnblogs.com/lijinwen/p/8444400.html

时间: 2024-10-07 20:25:04

手撸一个Vue滚动加载自定义指令的相关文章

vue 滚动加载

<template> <div class="wraper" @scroll="onScroll($event)"> <div class="item" v-for="item in items"> {{item}} </div> </div> </template> <script> export default { data () { re

Vue实现一个图片懒加载插件

前言 图片懒加载是一个很常用的功能,特别是一些电商平台,这对性能优化至关重要.今天就用vue来实现一个图片懒加载的插件. 这篇博客采用"三步走"战略--Vue.use().Vue.direction.Vue图片懒加载插件实现,逐步实现一个Vue的图片懒加载插件. Vue.use() 就像开发jQuery插件要用$.fn.extent()一样,开发Vue插件我们要用Vue.use().其实就是官方内部实现的一个方法,供广大开发者灵活开发属于自己的插件.只需要按照约定好的规则开发就行. 用

基于 Vue.js 的移动端组件库mint-ui实现无限滚动加载更多

通过多次爬坑,发现了这些监听滚动来加载更多的组件的共同点, 因为这些加载更多的方法是绑定在需要加载更多的内容的元素上的, 所以是进入页面则直接触发一次,当监听到滚动事件之后,继续加载更多, 所以对于无限滚动加载不需要写首次载入列表的函数, 代码如下: html: //父组件 <div v-infinite-scroll="loadMore" infinite-scroll-disabled="loading" infinite-scroll-distance=

移动设备的HTML页面中图片实现滚动加载

如今移动互联网风靡全球,移动页面的元素也是丰富多彩,一个移动页面的图片超过10张已经是再正常不过的事情了.但是相对,很多移动用户还停留在2G,3G这样的网络中.那么这样带宽的用户,在浏览这样的页面时,要把页面加载完毕,可能就需要10s,20s甚至更多,严重影响用户的体验.针对这样的问题,让页面中的图片滚动加载(图片出现在显示器屏幕上时再加载图片)显得非常重要!这样也可以有效地节省我们服务器的带宽和解决请求大并发的问题. 1.效果图.     这是加载过程中的图片菊花显示            

vue2.0无限滚动加载数据插件

  做vue项目用到下拉滚动加载数据功能,由于选的UI库(element)没有这个组件,就用Vue-infinite-loading 这个插件代替,使用中遇到的一些问题及使用方法,总结作记录! 安装:npm install vue-infinite-loading –save 引入 ES6 import InfiniteLoading from 'vue-infinite-loading'; export default { components: { InfiniteLoading, }, }

放弃antd table,基于React手写一个虚拟滚动的表格

缘起 标题有点夸张,并不是完全放弃antd-table,毕竟在react的生态圈里,对国人来说,比较好用的PC端组件库,也就antd了.即便经历了2018年圣诞彩蛋事件,antd的使用者也不仅不减,反而有所上升. 客观地说,antd是开源的,UI设计得比较美观(甩出其他组件库一条街),而且是蚂蚁金服的体验技术部(一堆p7,p8,p9,基本都是大牛级的)在持续地开发维护,质量可以信任. 不过,antd虽好,但一些组件在某一些场景下,是很不适用的.例如,以表格形式无限滚动地展示大量数据(1w+)时,

滚动加载服务器端内容——例子

网页代码如下 <!doctype html> <html> <head> <meta charset="utf-8"> <title>滚动加载</title> <style> * {margin:0; padding:0; border:0;} #container {width:960px; margin:auto;} #container:after {display:block; height:0

ThinkPHP加载自定义的外部文件和配置文件

我们知道ThinkPHP有公共的函数文件和配置文件,位于Common目录下,默认Common/function.php为公共的函数文 件,Conf/config.php为公共配置文件.好了,那么如何自定义其他的公共函数和配置文件呢.这里不得不讲到两个配置参数 LOAD_EXT_FILE和LOAD_EXT_CONFIG了. 1. LOAD_EXT_FILE配置的是自定义的函数文件,比如我想在Common目录下再创建一个common.php文件,那么在config.php里 则可以配置LOAD_EX

滚动加载图片

做了一个粗糙的滚动加载图片例子,先分享一下,后续不断完善. 基本功能是这样的: 1.页面一共有7层,每一层可以认为是不同类型的商品: 2,页面初始化时,只加载第一层的图片和数据等: 3,滚动时,动态加载图片:(一层一层的加载) 4,如果已经加载过的层,不再加载. 样式:     * {      margin: 0px;      padding: 0px;     } body { background: rgb(250, 222, 222); } .container { width: 95