标签：意思 有意思 == item over mic gif class rip
想实现上面这样分栏，并且溢出滚动的效果。可是自己下面的代码只能得到横向滚动条。觉得出现这个情况觉得还蛮有意思的，特地记录一下。
<li v-for="(item,index) in sortsInfo" @click="tabToggle(index)">
{{item.sortsName}}<i class="xmFont iconDArrow"></i>
<div class="sortsContent" v-if="index == tabNo">
<div class="sortsItem">
<p v-for="(itemlist,index) in item.sortList">{{itemlist}}</p>
</div>
<div class="sortsSure">
<span>重置</span>
<span>确定</span>
</div>
</div>
</li>
//css
.sortsContent {
width:100%;
position:absolute;
top:__(60px);
left:0;
color:$deep-gray;
.sortsItem{
width:100%;
box-sizing:border-box;
text-align:left;
padding:__(20px);
overflow:scroll;
columns:2;
height:__(150px);
}
解决方法是给分栏的内容加个外框。在这个包裹分栏内容的外框中设置columns,给外外框的父级设置overflow.
<li v-for="(item,index) in sortsInfo" @click="tabToggle(index)">
{{item.sortsName}}<i class="xmFont iconDArrow"></i>
<div class="sortsContent" v-if="index == tabNo">
//设置overflow:scroll
<div class="sortsItem">
//加外框设置,并设置样式column:2
<div class="sortDeailWrap">
<p v-for="(itemlist,index) in item.sortList">{{itemlist}}</p>
</div>
</div>
<div class="sortsSure">
<span>重置</span>
<span>确定</span>
</div>
</div>
</li>
//css
.sortsContent {
width:100%;
position:absolute;
top:__(60px);
left:0;
color:$deep-gray;
.sortsItem{
width:100%;
box-sizing:border-box;
text-align:left;
padding:__(20px);
overflow:scroll;
height:__(150px);
>div{
columns:2;
}
}
标签：意思 有意思 == item over mic gif class rip
原文地址：https://www.cnblogs.com/qiu-freedom/p/10591117.html
