长安镇做网站,宜兴市建设局官方网站,企业网站发布图片文章,上海中小企业服务平台需求: 想要一次加载10条数据#xff0c;滚动条加载到底部触发下一个十条数据#xff0c;无限循环直到无数据 一、首先在src下创建一个js文件#xff0c;完成自定义指令的编写 directives.js
import Vue from vueexport default () {Vue.directive(selectScroll, {bind…需求: 想要一次加载10条数据滚动条加载到底部触发下一个十条数据无限循环直到无数据 一、首先在src下创建一个js文件完成自定义指令的编写 directives.js
import Vue from vueexport 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-modelform.productId v-selectScrollhandleScroll // v-selectScroll:selectNamehandleScroll // !!!!!!!placeholder请选择产品 changehandleProductId classitem-widthel-optionv-foritem in productLists:keyitem.id:labelitem.name:valueitem.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);});},},
};
