微信小程序-自定义顶部导航栏(选项卡)-已解决

效果图:

wxml:

  {{item}}

 


 

wxss:

.navbar{
  flex: none;
  display: flex;
  background: #fff;
  border-bottom: 1rpx #07C160;
}
.navbar .item{
  position: relative;
  flex: auto;
  text-align: center;
  line-height: 80rpx;
  font-size: 32rpx;
}
/*选中后字体颜色*/
.navbar .item.active{
  color: #07C160;
}
/*选中后下划线颜色*/
.navbar .item.active:after{
  content: "";
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 7rpx;
  background: #07C160;
}

js:

var app = getApp()
Page({
  /**
   * 页面的初始数据
   */
  data: {
    navbar: ['水果', '蔬菜'],
    currentTab: 0
  },
//点击选中方法
navbar: function(e){
    this.setData({
      currentTab: e.currentTarget.dataset.idx
    })
  }
})