小程序之顶部导航条

图片：

index.wxml：

<view class="navbar">
  <text wx:for="{{navbars}}" data-idx="{{index}}" class="item {{currentTab==index ? 'active' : ''}}" wx:key="unique" bindtap="navbarTap">{{item.navbarName}}</text>
</view>

index.wcss：

.navbar{  
  flex: none;  
  display: flex;  
  background: #fff;  
}  
.navbar .item{  
  position: relative;  
  flex: auto;  
  text-align: center;  
  line-height: 80rpx;  
  font-size:14px;
}  
/* 顶部导航字体颜色 */
.navbar .item.active{  
  color: #f0145a;  
}  
/* 顶部指示条属性 */
.navbar .item.active:after{  
  content: "";  
  display: block;  
  position: absolute;  
  bottom: 0;  
  left: 0;  
  right: 0;  
  height: 6rpx;  
  background: #f0145a;  
}

iindex.js：

navbarTap: function(e) {
    console.debug(e);
    this.setData({
      currentTab: e.currentTarget.dataset.idx
    })
  },

navbarShow:function(success){
    var that = this;
    ajax.request({
      method: 'GET',
      url: '',
      success: data => {
        that.setData({
          navbars: data.result
        })
        console.log(data.result)
      }
    })
  },

ajax.js:

const api = '';
function request(opt) { 
wx.request({
  method: opt.method || 'GET',
  url: api + opt.url,
  header: {
    'content-type': 'application/json' // 默认值
  },
  data: opt.data,
  success: function (res) {
    if (res.data.code == 100) {
      if (opt.success) {
        opt.success(res.data);
      }
    } else {
      console.error(res);
      wx.showToast({
        title: res.data.message,
      })
    }
  }
})
} 
module.exports.request = request