使用Vue自定义指令v-loadmore实现列表下拉加载

使用Vue自定义指令v-loadmore实现列表下拉加载

参考链接： https://www.cnblogs.com/Neilisme/p/10245588.html

1、在 main.js 同级创建 directive.js 注册自定义指令

import Vue from 'vue'

Vue.directive('loadmore', {
    bind(el, binding) {
        var p = 0;
        var t = 0;
        var down = true;
        el.addEventListener('scroll', function() {
            //判断是否向下滚动
            p = this.scrollTop;
            if(t < p){
                down = true;
            }else{
                down = false;
            }
            t = p;
            const scrollDistance = this.scrollHeight - this.scrollTop - this.clientHeight;
            if (scrollDistance <= 0 && down) {
                // 滚动到底部后触发事件
                binding.value()
            }
        });
    }
})

2、在main.js中引入 使用 directives

import * as directives from './directives'

Vue.use(directives)

3、在需要添加下拉加载更多的元素上 加 样式和自定义指令

• v-loadmore 后加下拉后需要触发的事件loadMore（根据业务需求自行定义）

• 样式中明确该元素的固定高度，设置scroll

<div v-loadmore="loadMore" style="height:230px;overflow:scroll;">
    <CheckboxGroup v-model="onePatient" @on-change="checkOneItem">
        <Checkbox v-for="(item, index) in patientList" :key="index" v-model="item.checked" :label="item.patientName">
            {{item.patientName}}
            {{item.patientSexText}}
            {{item.age === '-' ? '' : `${item.age}岁`}}
        </Checkbox>
    </CheckboxGroup>
</div>