小程序中顶部导航栏示例代码
时间：2020-09-04 23:00:09
作者：重庆seo小潘
来源：
微信小程序 开发之顶部导航栏 需求：顶部导航栏 wxml：lt;!--导航条-- lt;view>wxss：page{display: flex;flex-direction: column;height: 100%; } .navbar{flex: none;display: flex;background: #fff; } .navbar .item{position: relative;flex: auto;text
微信小程序 开发之顶部导航栏
需求：顶部导航栏
wxml：<!--导航条--> <view>wxss：page{display: flex;flex-direction: column;height: 100%; } .navbar{flex: none;display: flex;background: #fff; } .navbar .item{position: relative;flex: auto;text-align: center;line-height: 80rpx; } .navbar .item.active{color: #FFCC00; } .navbar .item.active:after{content: "";display: block;position: absolute;bottom: 0;left: 0;right: 0;height: 4rpx;background: #FFCC00; }js：var app = getApp() Page({data: {navbar: ['首页', '搜索', '我'],currentTab: 0},navbarTap: function(e){this.setData({currentTab: e.currentTarget.dataset.idx})} })以上就是小程序中顶部导航栏示例代码的详细内容，更多请关注小潘博客其它相关文章！
