jsp电商网站开发教程临沂建设中专官方网站

1.实现效果

老规矩，直接上最后的实现效果

2.实现原理

直接上代码

   <el-form-item class="diagmosisItem" label="诊断" v-scroll="handleScroll"><el-selectsize="small"remotefilterableclearable:loading="getAllDiagnosisLoading"v-model="queryObj.diagnosisDesc":remote-method="handleRemoteDisease"@clear="handleClearDisease"><el-optionv-for="item in allDiagnosisList":key="item.valueId":label="item.valueNo +' '+ item.valueDesc":value="item.valueDesc"></el-option></el-select></el-form-item>
//js
//mothodshandleScroll() {if(!this.scrollStop) {this.diagnosisQuery.pageNo++this.getAllDiagnosis(this.diagnosisQueryText, 'join')}},// 远程搜索诊断async handleRemoteDisease(keyword = '') {this.diagnosisQueryText = keywordthis.getAllDiagnosis(keyword)},// 清除选中诊断handleClearDisease() {this.getAllDiagnosis('', 'clear')},//诊断列表async getAllDiagnosis(val = '', type = 'search') {try {this.getAllDiagnosisLoading = truethis.scrollStop = falselet res = nullif(this.isHaveDiagnoseFlag) {if(type =='search') {this.diagnosisQuery ={pageNo:0,pageSize:100}res = await this.reqGetAllDiagnosis({keyword:val,pageNo:0,pageSize:100})}else if(type == 'join') {res = await this.reqGetAllDiagnosis({keyword:val,...this.diagnosisQuery})}else{this.allDiagnosisList = this.allDiagnosisListthis.getAllDiagnosisLoading = false}}if (res && res.success) {if(type =='search') {this.allDiagnosisList = res.data}else{if(res.data.length == 0) {this.scrollStop = true}this.allDiagnosisList = [...res.data, ...this.allDiagnosisList]}this.getAllDiagnosisLoading = false}} catch (error) {this.getAllDiagnosisLoading = false}},
//主要看这里directives:{scroll:{bind(el, binding) {const SELECTNRAP_DON = el.querySelector('.el-select-dropdown .el-select-dropdown__wrap')SELECTNRAP_DON.addEventListener( 'scroll', function() {console.log(this.scrollHeight - this.scrollTop, this.clientHeight)const CONDITION = this.scrollHeight - this.scrollTop <= this.clientHeightif(CONDITION) {binding.value()}})}}},

scrollStop主要是用来诊断select移到底部不再请求数据，默认为false。思路反正就是到底了触发函数处理，pageNo++请求后端接口