话不多说，直接上代码，作用是下拉框内容无限滚动加载：
Html:
<FormItem style="position:relative" label="用户名:" prop="userName">
<Input v-model="formValidate.userName" :disabled="useNameDisable" placeholder="请输入用户名" @on-blur="clickblur" @on-focus="clickFocus"></Input>
<div class="scollClass" v-if="scollshow">
<Scroll height="" :on-reach-bottom="handleReachBottom">
<div v-for="item in userNameList" :key="item.name" @mousedown="scollListClick(item)" class="scollListClass">
{{ item.name }}
</div>
</Scroll>
</div>
</FormItem>
Js：
// 无限加载中的事件
scollListClick(val){
this.scollshow = false;
this.formValidate = val;
this.Formdata = val;
this.formValidate.userName = val.name;
// console.log(111)
this.handleSelectAll(false);
},
clickFocus(){
this.scollshow = true;
},
clickblur(){
this.scollshow = false;
},
// 无限加载
handleReachBottom () {
return new Promise(resolve => {
this.userpage = this.userpage* + ;
setTimeout(() => {
this.$store.dispatch('getUserNameList',{
page:this.userpage,
size:''
} ).then(res => {
if (res.data.code === ) {
if(res.data.data.list.length > ){
for(let i =;i<res.data.data.list.length;i++){
this.userNameList.push(res.data.data.list[i])
}
}
} else {
// util.showMsg(this, {diy:'操作失败！'})
}
})
resolve();
}, );
});
},
Css：
.scollClass{
position:absolute;
background:white;
z-index:;
width:%;
overflow:hidden;
border:1px solid #dddee1;
border-radius: 4px;
top:35px;
::-webkit-scrollbar
{
width: 6px;
height: 16px;
background-color: #F5F5F5;
}
/*定义滚动条轨道 内阴影+圆角*/
::-webkit-scrollbar-track
{
// -webkit-box-shadow: inset 0 0 6px #e9eaec;
border-radius: 3px;
background-color: #f5f7f9;
}
/*定义滑块 内阴影+圆角*/
::-webkit-scrollbar-thumb
{
border-radius: 3px;
// -webkit-box-shadow: inset 0 0 6px #e9e9e9;
background-color: #ccc;
}
}
.scollListClass{
height:24px;
line-height:24px;
// font-size:16px;
margin-left:8px;
}样式根据具体情况可以自行改动，进行进一步简单完善封装可以直接用