微信小程序自定义导航

html部分：

<!--pages/indent/indent.wxml-->
<!-- <text>订单页</text> -->
<view class="container">
  <!-- 导航 -->
  <view class='top_nav'>
    <view class="nav nav-name {{item.typeId == currentId ? 'nav-hover':''}}" wx:for="{{section}}" wx:key="id" id='{{item.typeId}}' catchtap='handleTap'>
      <view class="navFont"> {{item.name}}</view>
    </view>
  </view>

<!-- 全部 -->
<view hidden='{{currentId!=1}}'>
  <view class="list" 
  wx:for="{{shippingAdd}}"
  wx:for-item="i"
  wx:key="k"
  >

  </view>
</view>
<!-- 待付款 -->
<view hidden='{{currentId!=2}}'>
  <view class="list"></view>
</view>
<!-- 待发货 -->
<view hidden='{{currentId!=3}}'>
  <view class="list"></view>
</view>
<!-- 待收货 -->
<view hidden='{{currentId!=4}}'>
  <view class="list"></view>
</view>
<!-- 待评价 -->
<view hidden='{{currentId!=5}}'>
  <view class="list"></view>
</view>
</view>

 

JS部分：

 data: {
    currentId: '1',
    section: [{
      name: '全部',
      typeId: '1'
    }, {
      name: '待付款',
      typeId: '2'
    }, {
      name: '待发货',
      typeId: '3'
    },
    {
      name: '待收货',
      typeId: '4'
    },
    {
      name: '待评价',
      typeId: '5'
    }
    ]
  },
//点击每个导航的点击事件
  handleTap: function(e) {
    let id = e.currentTarget.id;
    if(id){
      this.setData({
        currentId:id
      })
    }
  },

　

样式部分：

/* pages/indent/indent.wxss */
page{
  height: 100%;
  background-color: rgb(244,244,244);
}
.container{
  font-family:‘Trebuchet MS’, ‘Lucida Sans Unicode’, ‘Lucida Grande’, ‘Lucida Sans’, Arial, sans-serif;
  font-size: 28rpx;
}
.top_nav{
  display: flex;
  font-size: 24rpx;
  border-top: 2px solid rgb(244,244,244);
  justify-content: space-between;
  flex-direction: row;
  background-color: #fff;
}
.nav-name{
  display: inline-block;
  padding: 20rpx 20rpx 20rpx 20rpx;
}
.nav-hover{
  color: #cc945c;
  border-bottom: 2px  solid #cc945c ;
}