vue 实现列表滚动

1.设置CSS属性

需要对两个属性进行设置：一个是外部div的最大高度是多少；一个是垂直滚动条的设置

<template>
        <div class="div1">
          <div v-for="i in count" :key="i" class="div2">{{ i }}</div>
        </div>
</template>

<script>
  export default {
    data () {
      return {
        count: 50
      }
    },
  }
</script>


<style lang="stylus" scoped>
.div1 {
  height: 80%;

  .div2 {
    max-height: 50%;
    overflow-y: auto;
    text-align: center;
  }
}

</style>

 

2.使用el-scrollbar

    <el-scrollbar style='height:100%'>
      <ul>
        <li v-for="(item, index) in menu" :key="item.code" v-bind:class="{active: isActive(item,index), show: toggleMenu[index]}" >
          <div class='title'  v-on:click="changeMenu(index,item.url)"><i :class="`vankeicon${index+1}`"></i>{{item.name}}<span v-if='item.subMenus'></span></div>
          <ul :style="{'height':toggleMenu[index] ? `${item.subMenus.length*45}px` : 0 }" v-if='item.subMenus'>
            <li v-for="sub in item.subMenus" :key="sub.funtCd" v-bind:class="{ active: isSubActive(sub.url,sub.funtCd) }">
              <router-link :to="sub.url">{{sub.name}}<div v-b-tooltip.html.bottomleft :title="meunTips.get(sub.name)"  class="x-text"  v-if='meunTips.get(sub.name)'>
                <img src="../../assets/images/prompt.png" alt=""></div>
              </router-link>
            </li>
          </ul>
        </li>
      </ul>
    </el-scrollbar>