在Vue項(xiàng)目中使用Vant UI框架時(shí)，遇到Sidebar側(cè)邊導(dǎo)航組件的滾動(dòng)條在整個(gè)屏幕的右側(cè)：
?需要實(shí)現(xiàn)的效果是：左側(cè)導(dǎo)航欄有單獨(dú)的滾動(dòng)條，右側(cè)主體內(nèi)容也有單獨(dú)的滾動(dòng)條，互不干涉。
?(效果是左側(cè)和右側(cè)都是有一個(gè)滾動(dòng)條的）
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>重點(diǎn)是css部分：左側(cè)和右側(cè)的盒子需要定寬定高，然后overflow設(shè)置為scroll。文章來源：http://www.zghlxwxcb.cn/news/detail-586496.html
高度可以用一屏幕的高減去底部導(dǎo)航欄的高度。文章來源地址http://www.zghlxwxcb.cn/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;
}
}
}到了這里，關(guān)于Vant UI的Sidebar側(cè)邊導(dǎo)航組件單獨(dú)設(shè)置滾動(dòng)條的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
