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

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

<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>

猜你喜欢

转载自www.cnblogs.com/wd163/p/12751065.html