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

最新推荐文章于 2024-09-13 15:05:17 发布

asteriaV

最新推荐文章于 2024-09-13 15:05:17 发布

阅读量839

点赞数

分类专栏：微信小程序

本文链接：https://blog.csdn.net/asteriav/article/details/109001707

版权

微信小程序专栏收录该内容

34 篇文章 8 订阅

订阅专栏

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