audio小程序放大_小程序顶部导航栏，可滑动，可动态选中放大

最近在研究小程序顶部导航栏时&＃xff0c;学到了一个不错的导航栏&＃xff0c;今天就来分享给大家。

老规矩&＃xff0c;先看效果图

• 1&＃xff0c;顶部导航栏

• 2&＃xff0c;可以左右滑动的导航栏

• 3&＃xff0c;选中条目放大

原理其实很简单&＃xff0c;我这里把我研究后的源码发给大家吧。

wxml文件如下



  
    {{item.name}}view>
  view>
scroll-view>


wxss文件如下

/* 导航栏布局相关 */
.navbar {
  width: 100%;
   height: 90rpx;
  /* 文本不换行 */
  white-space: nowrap;
  display: flex;
  box-sizing: border-box;
  border-bottom: 1rpx solid #eee;
  background: #fff;
  align-items: center;
  /* 固定在顶部 */
  position: fixed;
  left: 0rpx;
  top: 0rpx;
}

.nav-item {
  padding-left: 25rpx;
  padding-right: 25rpx;
  height: 100%;
  display: inline-block;
  /* 普通文字大小 */
  font-size: 28rpx;
}

.nav-text {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 4rpx;
  box-sizing: border-box;
}

.tab-on {
  color: #fbbd08;
  /* 选中放大 */
  font-size: 38rpx !important;
  font-weight: 600;
  border-bottom: 4rpx solid #fbbd08 !important;
}


js文件如下

// pages/test2/test2.js
Page({
  data: {
    tabCur: 0, //默认选中
    tabs: [{
        name: &＃39;等待支付&＃39;,
        id: 0
      },
      {
        name: &＃39;待发货&＃39;,
        id: 1
      },
      {
        name: &＃39;待收货&＃39;,
        id: 2
      },
      {
        name: &＃39;待签字&＃39;,
        id: 3
      },
      {
        name: &＃39;待评价&＃39;,
        id: 4
      },
      {
        name: &＃39;五星好评&＃39;,
        id: 5
      },
      {
        name: &＃39;差评订单&＃39;,
        id: 6
      },
      {
        name: &＃39;编程小石头&＃39;,
        id: 8
      },
      {
        name: &＃39;小石头&＃39;,
        id: 9
      }
    ]

  },

  //选择条目
  tabSelect(e) {
    this.setData({
      tabCur: e.currentTarget.dataset.id,
      scrollLeft: (e.currentTarget.dataset.id - 2) * 200
    })
  }
})


代码里注释很明白了&＃xff0c;大家自己跟着多敲几遍就可以了。后面会更新更多小程序相关的知识&＃xff0c;请持续关注。