Vant UI的Sidebar侧边导航组件单独设置滚动条-Toy模板网

这篇具有很好参考价值的文章主要介绍了Vant UI的Sidebar侧边导航组件单独设置滚动条。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

在Vue项目中使用Vant UI框架时，遇到Sidebar侧边导航组件的滚动条在整个屏幕的右侧：

vant 滚动条,移动端,前端,javascript,vant,移动端

需要实现的效果是：左侧导航栏有单独的滚动条，右侧主体内容也有单独的滚动条，互不干涉。

vant 滚动条,移动端,前端,javascript,vant,移动端

(效果是左侧和右侧都是有一个滚动条的）

html部分：

    <div class="cate-list">
      <div class="left-nav">
        <van-sidebar v-model="activeKey" @change="changeNav">
          <van-sidebar-item
            :title="item.cat_name"
            v-for="(item, index) in cateList"
            :key="index"
          />
        </van-sidebar>
      </div>
      <div class="cate-body">
        <div
          class="cate-body-item"
          v-for="(item, index) in catev2List"
          :key="index"
        >
          <div class="title">/ {{ item.cat_name }} /</div>
          <van-grid :border="false" :column-num="3">
            <van-grid-item
              v-for="(subitem, index2) in catev2List[index].children"
              :key="index2"
            >
              <img :src="subitem.cat_icon" />
              <span class="name">{{ subitem.cat_name }}</span>
            </van-grid-item>
          </van-grid>
        </div>
      </div>
    </div>

重点是css部分：左侧和右侧的盒子需要定宽定高，然后overflow设置为scroll。

高度可以用一屏幕的高减去底部导航栏的高度。文章来源地址https://www.toymoban.com/news/detail-586496.html

  .cate-list {
    display: flex;
    justify-content: space-between;
    .left-nav {
      width: 22%;
      height: calc(100vh -100px);
      overflow: scroll;
    }
    .cate-body {
      width: 78%;
      height: calc(100vh -100px);
      overflow: scroll;
      .title {
        margin-top: 40px;
        text-align: center;
        font-size: 26px;
        font-weight: bold;
      }
      img {
        width: 140px;
        height: 140px;
      }
      .name {
        font-size: 24px;
      }
    }
  }

到了这里，关于Vant UI的Sidebar侧边导航组件单独设置滚动条的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！