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

电玩女神 2022-12-13 09:53 305阅读 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 ;
      }

发表评论取消回复

表情：

评论列表（有 0 条评论，305人围观）

还没有评论，来说两句吧...

相关阅读

相关微信小程序底部导航栏

*“花树得晴红欲染，远山过雨青如滴”** 序最近自己在研究微信小程序，几乎每个程序都会有导航栏，或在顶部，或在底部。于是我简单做了一个导航栏在底部的程序。 ...

秒速五厘米/ 2024年04月17日 05:31/ 0 赞/ 126 阅读

相关微信小程序导航栏操作

navigationBarBackgroundColor 导航栏背景颜色，如”\000000” navigationBarTextStyle 导航栏标题颜色，仅支持 blac

淡淡的烟草味﹌/ 2023年01月10日 05:29/ 0 赞/ 255 阅读

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

wxml <view class="title-menu"> <view class="title-menu-item active"> 全部

电玩女神/ 2022年12月13日 09:53/ 0 赞/ 306 阅读

相关微信小程序微信小程序实现跑马灯（多条文字横向衔接滚动）

js代码 Page({ data: { data: [ {

た入场券/ 2022年12月05日 13:52/ 0 赞/ 558 阅读

相关微信小程序官方横向滚动tab

先看效果： ![Center][] Page(\{ data: \{ bodyList: \[ \{

Bertha 。/ 2022年06月16日 06:11/ 0 赞/ 343 阅读

相关微信小程序实现横向滚动

最近做项目的时候遇到一个需求实现自定义导航栏的横向滚动,研究了一会,今天记录一下. 看一下实现效果: (下面的导航栏由六个view组成,可滑动) ![70][]

ゝ一纸荒年。/ 2022年05月21日 00:45/ 0 赞/ 405 阅读

相关微信小程序-横向滑动scroll-view隐藏滚动条

文章转载自：[https://blog.csdn.net/qq\_24734285/article/details/53912799][https_blog.csdn.net_

傷城~/ 2022年05月16日 14:41/ 0 赞/ 312 阅读

相关微信小程序 scroll-view 横向不滚动/隐藏滚动条

1.scroll-view 中的需要滑动的元素不可以用 float 浮动使其一行展示； 2.包裹scroll-view的元素如果用 display:flex; 是没有滚动效果

水深无声/ 2022年04月16日 06:26/ 0 赞/ 1135 阅读

相关微信小程序设置滚动条

<scroll-view scroll-y="true" style="height: 200px">

素颜马尾好姑娘i/ 2022年01月26日 14:17/ 0 赞/ 744 阅读

相关微信小程序 - scroll-view横向滚动

scroll-view 设置横向滚动 // html scroll-view.scroll(:scroll-x="true") div(v-fo

叁歲伎倆/ 2021年07月26日 19:41/ 0 赞/ 568 阅读