学院网站群建设的目标,业之峰装饰公司官网,西宁网站系统建设,杭州营销型网站怎么做先看一个线上的演示示例#xff1a;https://code.juejin.cn/pen/7273352811440504889
背景
我们在实际开发中经常遇到这样的需求#xff1a;
el-select实现懒加载#xff0c;用通俗的话说#xff0c;为了增加响应速度#xff0c;就是初始下拉只展示50条数据#xff0c…先看一个线上的演示示例https://code.juejin.cn/pen/7273352811440504889
背景
我们在实际开发中经常遇到这样的需求
el-select实现懒加载用通俗的话说为了增加响应速度就是初始下拉只展示50条数据滚动条下拉到底部后再次调用接口增量加载接下来的50条数据重复该情况直到数据加载完成。
实现思路
首先需要后端提供接口支持分页查询
前端调用接口需要传参当前页currentPage和每页展示条数pageNumber每次滚动条滚动到底部后 currentPage
比如初次调用接口currentPage1pageNumber50那么第二次调用时候currentPage2pageNumber50以此类推。
那么我们如何知道滚动条滚动到底部了呢 参考链接https://blog.csdn.net/weixin_43340372/article/details/132210911?spm1001.2014.3001.5502
以上我们理解了如何判断滚动条滚动到底部了
那么当滚动条滚动到底部后如何触发加载方法呢
vue给我们提供了自定义指令
新建自定义指令el-select-lazyloading帮定到el-select元素上在元素第一次帮定的时候会调用
bind方法
通过这两个类.el-select-dropdown .el-select-dropdown__wrap我们可以拿到滚动的盒子
对该盒子添加scroll滚动事件滚动到底部时触发方法。
具体实现
Api
为了更接近真实我们先模仿一个接口调用。
// 伪造接口调用
class Api {#baseData [{value: 选项1,label: 黄金糕}, {value: 选项2,label: 双皮奶}, {value: 选项3,label: 蚵仔煎}, {value: 选项4,label: 龙须面}, {value: 选项5,label: 北京烤鸭}, {value: 选项7,label: 北京烤鸭1}, {value: 选项8,label: 北京烤鸭2}, {value: 选项9,label: 北京烤鸭3}, {value: 选项10,label: 北京烤鸭4}]getData(currentPage 1, pageNumber 10) {return new Promise(resolve {setTimeout(() {let data [];if (currentPage 1) {data this.#baseData.map(item ({ value: item.value currentPage-${currentPage}, label: item.label currentPage-${currentPage} }))} else {data this.#baseData;}resolve(data);}, 1000)})}
}
const api new Api(); 以上代码中首先新建了一个Api类在该类中提供了每次调用接口的基础数据baseData
看到这里大家可能会有疑问为什么baseData前要加一个#号#baseData代表为私有属性只能在本类中访问
getData方法接受两个传参第一个当前页currentPage第二个每页的条数pageNumber
调用接口1秒后返回数据 代码结构
div idapp选择活动el-select v-modelvalue stylewidth: 300px v-el-select-lazyloadinglazyloadingel-option :labelitem.label :valueitem.value v-foritem in list :keyitem.value/el-option/el-select
/divscript
// 伪造接口调用
class Api {#baseData [{value: 选项1,label: 黄金糕}, {value: 选项2,label: 双皮奶}, {value: 选项3,label: 蚵仔煎}, {value: 选项4,label: 龙须面}, {value: 选项5,label: 北京烤鸭}, {value: 选项7,label: 北京烤鸭1}, {value: 选项8,label: 北京烤鸭2}, {value: 选项9,label: 北京烤鸭3}, {value: 选项10,label: 北京烤鸭4}]getData(currentPage 1, pageNumber 10) {return new Promise(resolve {setTimeout(() {let data [];if (currentPage 1) {data this.#baseData.map(item ({ value: item.value currentPage-${currentPage}, label: item.label currentPage-${currentPage} }))} else {data this.#baseData;}resolve(data);}, 1000)})}
}
const api new Api();
// 全局注册组件
new Vue({el: #app,directives: {el-select-lazyloading: {bind(el, binding) {let SELECT_DOM el.querySelector(.el-select-dropdown .el-select-dropdown__wrap);SELECT_DOM.addEventListener(scroll, function () {let condition this.scrollHeight - this.scrollTop this.clientHeight;if (condition) {binding.value();}});},},},data() {return {currentPage: 1,pageNumber: 10,value: ,list: [],};},methods: {async lazyloading() {this.loading true;const data await api.getData(this.currentPage);this.loading false;this.list.push(...data);this.currentPage;}},mounted() {this.lazyloading();}
})/script
参考链接 https://blog.csdn.net/weixin_43340372/article/details/132210911?spm1001.2014.3001.5502
