WeChatアプレット書き込み水平スクロールバーナビゲーションバー

wxml 

	<view  class="title-menu">
						<view class="title-menu-item active"> 全部 </view>
						<view class="title-menu-item">书柜</view>
						<view class="title-menu-item">桌</view>
						<view class="title-menu-item">床</view>
						<view class="title-menu-item">沙发</view>
						<view class="title-menu-item">书柜</view>
						<view class="title-menu-item">桌</view>
						<view class="title-menu-item">床</view>
						<view class="title-menu-item">沙发</view>
						<view class="title-menu-item">书柜</view>
						<view class="title-menu-item">桌</view>
						<view class="title-menu-item">床</view>
						<view class="title-menu-item">沙发</view>
					</view>

wxss 

 
 .title-menu{
  display: flex;
  font-size: 15px;
  width: 100%;
  overflow-y: scroll;
  white-space: nowrap; 
  align-items: center;
 }
 .title-menu  .title-menu-item{
  display: block;
  width: 80px;
  margin:20rpx;
  border-radius: 10rpx;
  padding: 8rpx 20rpx;
  background: #f5f5f5;
  }
 
  .title-menu  .active{
    color: #fff;
    background:#ff5155 ;
  }