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

最新推荐文章于 2023-11-20 11:40:23 发布

MonroeYu

最新推荐文章于 2023-11-20 11:40:23 发布

阅读量507

点赞数

CC 4.0 BY-SA版权

文章标签： html flex js html5 nagios

本文链接：https://blog.youkuaiyun.com/m0_37238192/article/details/117544706

本文介绍了如何使用uniapp的CSS样式实现一个双排菜单，并且菜单可以横向平滑滑动。通过<scroll-view>组件结合flex布局，创建了一个可滚动的菜单列表，每个菜单项包含一个图片和文字描述。使用navigator组件跳转到详细页面，并通过设置hover-class为none以消除点击高亮效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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