微信小程序写横向滚动条导航栏

电玩女神 2022-12-13 09:53 346阅读 0赞

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 ;
  }