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

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

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

可以看到我们实现了如下功能

• 1&＃xff0c;顶部导航栏
• 2&＃xff0c;可以左右滑动的导航栏
• 3&＃xff0c;选中条目放大

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

wxml文件如下


{{item.name}}



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;请持续关注。