vue实现左右两列竖直分别滑动，且双向关联的选项卡

Posted 2021-02-27 wd163

先完成‘左右两列竖直分别滑动，相互之间不存在任何关联’的页面样式：

<t

 

 

emplate>

<div>

  <div class="flex-between">

    <div class="left">

      <span v-for="n in 16" :key="n">{{n}}</span>

    </div>

    <div class="right">

      <span v-for="m in 8" :key="m">{{m}}</span>

    </div>

  </div>

</div>

</template>

<style scoped>

.left, .right{

  overflow-y: auto;

  height: 667px;//高度是指滚动窗口的高度，必须有

}

.left{

  width: 20%;

}

.right{

  width: 80%;

}

.left span{

   background: forestgreen;

}

.right span{

   background: red;

   height: 300px;

}

</style>