uniapp css实现双排菜单向左滑动

<scroll-view class="typelist" scroll-x>
<view class="nav-bar-wrap">
<block v-for="(item,index) in goodstypelist">
<view class="nav-bar-item">
<navigator class="singlelist" :url="'/pages/categorylist/categorylist?&type=10&name='+item.name+'&category_id='+item.id"
hover-class="none">
<image :src="item.image" mode="widthFix"></image>
<view class="f24 center">{{item.name}}</view>
</navigator>
</view>
</block>
</view>
</scroll-view>

 

.typelist{
width: 100%;
overflow-x: scroll;
overflow-y:hidden;
white-space: nowrap;
flex-wrap: wrap;
padding: 40upx 0upx;
padding-bottom: 0upx;
}
.typelist .singlelist{
width: 100%;
display: inline-block;
font-size: 24upx!important;
height: 160upx;
text-align: center;
margin-bottom: 0rpx;
}
.typelist .singlelist image{
width: 96upx;
margin: 0upx auto;
}
/* 去除滚动条 */
::-webkit-scrollbar {
display:none;
width:0;
height:0;
color:transparent;
}
.nav-bar-wrap { // 关键的样式
display: flex;
flex-flow: column wrap;
height: 320rpx;
}
.nav-bar-item{
width: 20%;
display: flex;
position: relative;
}