directive定义一个滑动后加载更多的指令

108 阅读2分钟

定义一个加载更多的指令,当滑动某个el-table时,滑动到底部时自动向后台发送请求,获取新的数据,假设命令为v-loadmore,首先,实现该方法需要解决两个问题:(1)监听滑块的滑动位置,判断是否滑倒底部。(2)一旦滑到底部,就向后台发送数据,并和老数据进行拼接。

以下为directive的出发方式和属性:

触发方式:
bind: 只调用一次,指令第一次绑定到元素时调用,用这个钩子函数可以定义一个在绑定时执行一次的初始化动作。
inserted: 被绑定元素插入父节点时调用(父节点存在即可调用,不必存在于 document 中)。
update: 被绑定元素所在的模板更新时调用,而不论绑定值是否变化。通过比较更新前后的绑定值,可以忽略不必要的模板更新(详细的钩子函数参数见下)。
componentUpdated: 被绑定元素所在模板完成一次更新周期时调用。
unbind: 只调用一次, 指令与元素解绑时调用。

属性:
el: 指令所绑定的元素,可以用来直接操作 DOMbinding:{
  name: 指令名,不包括 v- 前缀。
  value: 指令的绑定值, 例如: v-my-directive="1 + 1", value 的值是 2。
  oldValue: 指令绑定的前一个值,仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。
  expression: 绑定值的表达式或变量名。 例如 v-my-directive="1 + 1" , expression 的值是 "1 + 1"。
  arg: 传给指令的参数。例如 v-my-directive:foo, arg 的值是 "foo"。
  modifiers: 一个包含修饰符的对象。例如: v-my-directive.foo.bar, 修饰符对象 modifiers 的值是 { foo: true, bar: true }。
  vnode: Vue 编译生成的虚拟节点。
}

因此,可采用以上el属性直接操作el-table,监听其滑块滑动的位置。当监听到滑块的位置后,则触发请求,该请求函数可从binding.value获得。 image.png 上述binding.value的值即为loadmore函数 image.png 在html中的用法 image.png