关于Vue+iview的简单下拉框滚动加载

话不多说，直接上代码，作用是下拉框内容无限滚动加载：

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="120" :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*1 + 1;
          setTimeout(() => {
              this.$store.dispatch('getUserNameList',{
                page:this.userpage,
                size:'5'
              } ).then(res => {
                  if (res.data.code === 200 ) {
                      if(res.data.data.list.length > 0){
                        for(let i =0;i<res.data.data.list.length;i++){
                          this.userNameList.push(res.data.data.list[i])
                        }
                      }
                  } else {
                      // util.showMsg(this, {diy:'操作失败！'})
                  }
              })
              resolve();
          }, 500);
      });
    },

Css：

　　

.scollClass{
  position:absolute;
  background:white;
  z-index:3;
  width:100%;
  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;
}

 

样式根据具体情况可以自行改动，进行进一步简单完善封装可以直接用

 

转载于:https://www.cnblogs.com/wy120/p/10892752.html