和methods平级:

    directives: {
loadmore: {//自定义指令: 下拉加载
bind(el, binding) {   
var p = 0;   
var t = 0;   
var down = true;   
var selectWrap = el.querySelector('.selectPhaseBox .el-scrollbar__wrap');
selectWrap.addEventListener('scroll', function() {     
//判断是否向下滚动     
p = this.scrollTop;  
if(t < p){       
down = true;     
}else{       
down = false;     
}     
t = p;     
//判断是否到底     
const sign = 10;     
const scrollDistance = this.scrollHeight - this.scrollTop - this.clientHeight;     
if (scrollDistance <= sign && down) {       
binding.value()     
}   
}); 
}
}
}  

注意点:

1.通过querySelector来监测滚动框

2.使用v-loadmore="loadmore"来执行回调函数,其中loadmore可以自定义业务逻辑,其中v-loadmore指令要放到监测的组件父级上

3.局部自定义指令放在组件文件里面,全局自定义指令放在main.js里面用Vue.directives的方式。

总结:

1.在 Vue2.0 中,代码复用和抽象的主要形式是组件。

2.3层:指令 ==》钩子函数(某个时间点,bind,inserted,unbind) ==》钩子的参数(el,binding)

参考链接:https://www.jianshu.com/p/4f0142d737a0

官方参考链接:https://cn.vuejs.org/v2/guide/custom-directive.html

Vue自定义指令实现下拉加载:v-loadmore的更多相关文章

  1. vue实现ajax滚动下拉加载,同时具有loading效果

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  2. 【转载】Vue自定义指令实现pc端加载更多

    转载来源:https://www.86886.wang/detail/5a6f19e644f9da55274c3bbd,谢谢作者分享! 原理 document.documentElement.scro ...

  3. vue之vant组件下拉加载更多

    vant地址:https://youzan.github.io/vant/#/zh-CN/intro 基础用法 List 组件通过loading和finished两个变量控制加载状态,当组件滚动到底部 ...

  4. Android中自定义ListView实现上拉加载更多和下拉刷新

    ListView是Android中一个功能强大而且很常用的控件,在很多App中都有ListView的下拉刷新数据和上拉加载更多这个功能.这里我就简单记录一下实现过程. 实现这个功能的方法不止一个,Gi ...

  5. vue使用vant-ui实现上拉加载、下拉刷新和返回顶部

    vue使用vant-ui实现上拉加载.下拉刷新和返回顶部 vue现在在移动端常用的ui库有vant-ui和mint-ui,上拉加载.下拉刷新和返回顶部也是移动端最基础最常见的功能.下面就用vant-u ...

  6. 使用谷歌提供的SwipeRefreshLayout下拉控件,并自定义实现下拉加载的功能

    package com.loaderman.swiperefreshdemo; import android.os.Bundle; import android.os.Handler; import ...

  7. MUI - 上拉刷新/下拉加载

    新闻信息列表必备的功能,支持Table,Ul等列表. 以下是DIV版本,在安卓端或者ios端必须使用双webview模式,传送门:http://dev.dcloud.net.cn/mui/pulldo ...

  8. ASP.NET仿新浪微博下拉加载更多数据瀑布流效果

    闲来无事,琢磨着写点东西.貌似页面下拉加载数据,瀑布流的效果很火,各个网站都能见到各式各样的展示效果,原理大同小异.于是乎,决定自己写一写这个效果,希望能给比我还菜的菜鸟们一点参考价值. 在开始之前, ...

  9. vue实现pc端上拉加载功能,不兼容移动端

    所用插件:Mock.js 这个只用到它简单的功能,拦截ajax请求. vue和axios,vue基础知识请看文档. axios类似于jquery的ajax方法. 以下是是该功能所有代码,其中mock的 ...

随机推荐

  1. 安装vue时使用npm install 报错

    npm ERR! Darwin 14.3.0 npm ERR! argv "/usr/local/Cellar/node/6.4.0/bin/node" "/usr/lo ...

  2. SQLServer中同义词Synonym的用法

    以前一直认为SqlServer中的同义词(Synonym)没有什么用处,所以也一直没有去查它的语法格式.今天碰到一个问题,用Synonym来解决再好不过了.问题是这样子的,我的系统中用到了多个数据库, ...

  3. echarts 总结:

    options配置项: title: 图表标题的配置 tooltip: 鼠标悬浮的提示 toolbox: 工具栏 series: 数据项,是每一个个的数据对象,可以根据type配置每一项数据的图例. ...

  4. mysql主从复制主服务器日志格式的区别

        statement(语句级别,从服务器直接把语句拿来执行):            影响一大片(插入很多条或修改很多条),就适合用 statement       row(行级别,从服务器直接 ...

  5. echarts如何修改数据视图dataView中的样式

    原文链接:点我 做了一个现实折线图的图表,通过右上角icon可以自由切换成柱状图,表格.在表格中遇到的一点小问题,解决方案如下: 1.场景重现 这是一个显示两个折线图的图表,一切看起来都很顺利.但是点 ...

  6. Laravel核心解读--HTTP内核

    Http Kernel Http Kernel是Laravel中用来串联框架的各个核心组件来网络请求的,简单的说只要是通过public/index.php来启动框架的都会用到Http Kernel,而 ...

  7. OpenJDK源码研究笔记(六)--观察者模式工具类(Observer和Observable)和应用示例

    本文主要讲解OpenJDK观察者模式的2个工具类,java.util.Observer观察者接口,java.util.Observable被观察者基类. 然后,给出了一个常见的观察者应用示例. Obs ...

  8. hiho 1055 刷油漆 树形dp

    一个简单的树上的背包问题. 代码: #include <iostream> #include <cstdio> #include <cstring> #includ ...

  9. 大话设计模式C++实现-第15章-抽象工厂模式

    一.UML图 二.概念 抽象方法模式(Abstract Factory):提供一个创建一系列相关或互相依赖对象的接口,而无需指定他们详细的类. 三.包括的角色 (1)抽象工厂 (2)详细工厂:包含详细 ...

  10. KVM硬件辅助虚拟化之 EPT in Nested Virtualization

    在嵌套虚拟环境(Nested Virtualization)下,执行在hypervisor上的Virtual Machine仍能够作为hypervisor去执行其他的Virutal Machine,而 ...