效果图

1.wxml

<!--导航条--><view class="navbar"><text wx:for="{{navbar}}" data-idx="{{index}}" class="item {{currentTab==index ? 'active' : ''}}" wx:key="unique" bindtap="navbarTap">{{item}}</text></view><!--首页--><view hidden="{{currentTab!==0}}">tab_01</view><!--搜索--><view hidden="{{currentTab!==1}}">tab_02</view><!--我--><view hidden="{{currentTab!==2}}">tab_03</view>

2.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;}.active_top {margin: 100px;color: red;font-size: 20px;}

3.wxjs

// pages/SUN/tab1/tab1.jsvar app = getApp()Page({/*** 页面的初始数据*/data: {navbar: ['首页', '搜索', '我'],currentTab: 0},navbarTap: function (e) {this.setData({currentTab: e.currentTarget.dataset.idx})},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {},/*** 生命周期函数--监听页面初次渲染完成*/onReady: function () {},/*** 生命周期函数--监听页面显示*/onShow: function () {},/*** 生命周期函数--监听页面隐藏*/onHide: function () {},/*** 生命周期函数--监听页面卸载*/onUnload: function () {},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh: function () {},/*** 页面上拉触底事件的处理函数*/onReachBottom: function () {},/*** 用户点击右上角分享*/onShareAppMessage: function () {}})