微信小程序顶部tabbar的实现

<!--pages/order/order.wxml-->
<view class="navbar">
  <text class="item {{currentTab==index?'active':''}}" wx:for="{{navbar}}" data-tab_index="{{index}}" wx:key="unique" bindtap="changeNavBar">{{item}}</text>
</view>
<!-- 占位 -->
<view style="height: 80rpx;"></view>
<view hidden="{{currentTab!==0}}">1</view>
<view hidden="{{currentTab!==1}}">2</view>
<view hidden="{{currentTab!==2}}">3</view>
<view hidden="{{currentTab!==3}}">4</view>
<view hidden="{{currentTab!==4}}">5</view>

// pages/order/order.js
Page({
    /**
     * 页面的初始数据
     */
    data: {
        navbar: ['全部', '已支付', '已完成','待支付','已取消'],
        currentTab: 0,
    },
    // 改变顶部导航
    changeNavBar: function (e) {
        this.setData({
            currentTab: e.currentTarget.dataset.tab_index
        })
    }
})

/* pages/order/order.wxss */

.navbar{
    z-index: 10;
    width: 100%;
      flex: none;
      display: flex;
      background: #fff;
      position: fixed;
      .item{
        position: relative;
        flex: auto;
        text-align: center;
        line-height: 80rpx;
      }
      .item.active{
        color: #EB3855;
      }
      .item.active:after{
        content: "";
        display: block;
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 6rpx;
        background: #EB3855;
      }
    }