需求:
想要一次加载10条数据，滚动条加载到底部触发下一个十条数据，无限循环直到无数据
一、首先在src下创建一个js文件，完成自定义指令的编写
directives.js
import Vue from 'vue'export default () => {Vue.directive('selectScroll', {bind (el, binding) {// 如上图，我通过v-if来控制了两个select框，当没有binding.arg这个参数时，我只能监听到企业类型下的select框，所以，我通过传参控制了监听的哪个select框var className = '.' + binding.argel.className = binding.arg// 获取滚动页面DOMconst SCROLL_DOM = el.querySelector(`${className} .el-select-dropdown .el-select-dropdown__wrap`)// const SCROLL_DOM = el.querySelector(“.el-select-dropdown .el-select-dropdown__wrap“)SCROLL_DOM.addEventListener('scroll', function () {// 当前的滚动位置 减去 上一次的滚动位置// 如果为true则代表向上滚动，false代表向下滚动const CONDITION = this.scrollHeight - this.scrollTop <= this.clientHeight// 如果已达到指定位置则触发if (CONDITION) {// 将滚动行为告诉组件binding.value()}})}})
}
二、在main.js中引入
import Directives from './views/directives'
Vue.use(Directives)
三、然后应用 v-selectScroll=“handleScroll”
<el-select v-model="form.productId" v-selectScroll="handleScroll" // v-selectScroll:selectName="handleScroll" // !!!!!!!placeholder="请选择产品" @change="handleProductId" class="item-width"><el-optionv-for="item in productLists":key="item.id":label="item.name":value="item.id"></el-option>
</el-select>
export default {data() {return {itemList: [], // 下拉框选项列表currentPage: 1, // 当前页码pageSize: 10, // 每页显示的数量hasMoreItems: true, // 是否还有更多选项};},methods: {handleScroll() {if (this.hasMoreItems) {// 增加当前页码this.currentPage++// 调用分页接口，传递搜索关键字和分页参数this.loadMoreData()}},loadMoreData() {// 调用你的分页接口，传递搜索关键字和分页参数// 例如，你可以使用 axios 库发送请求// 注意根据你的接口返回的数据格式进行适当的修改axios.get('/your-api-url', {params: {keyword: '', // 传递搜索关键字page: this.currentPage, // 传递当前页码pageSize: this.pageSize, // 传递每页显示的数量},}).then((response) => {//是否可以继续滚动调接口 根据你每一页多少来写这个三元this.hasMoreItems = response.data.length > 9 ? true : false// 处理接口返回的数据const data = response.data;this.itemList = this.itemList.concat(data.items); // 将新的选项添加到列表中}).catch((error) => {console.error(error);});},},
};
