<view class="navBox">
<scroll-view scroll-x="true" class="scrollBiew" >
<view class="currBox" v-for="item in navbox" :key="item.id" @tap="clickNav(item.id)" :class="item.id==navId?'current':''">
{{item.name}}
</view>
</scroll-view>
</view>
.navBox {
background-color: #fff;
height: 90rpx;
padding: 24rpx 10rpx;
font-size: 24rpx;
// width: 750rpx;
.scrollBiew {
width: 100%;
white-space: nowrap;
// width: 1200rpx;
padding: 0 32rpx;
// display: inline;
// display: inline-block;
display: flex;
// display: inline-block;
justify-content: flex-start;
flex-wrap: nowrap;
}
.current {
background:rgba(255,255,255,1)!important;
border:1px solid rgba(255,179,0,1)!important;
color: #FFB300!important;
}
.currBox {
display: inline-block;
padding: 4rpx 18rpx;
background:rgba(255,255,255,1);
border:1px solid rgba(102,102,102,1);
border-radius: 21rpx;
margin-right: 24rpx;
color: #666;
}
}
white-space: nowrap;
内容使用了flex布局,但是文本一致换行显示,flex-wrap没有用,使用
white-space: nowrap;
问题解决。