小程序自定义底部tab

场景

1.tabBar是在内页而非首页，这时就不得不自定义一个tabBar了
2.自定义风格
3.子页数量超过5个，得到更多了tab
4.改变点击tab默认事件，比如出登录界面，或者弹出上拉子菜单等

步骤

1.照抄weui中的navi bar
2.重写weui-navbar的bottom/top值，互换border上下边框，大致效果就出现了

.weui-navbar {
  background: white;
  bottom: 0;
  top: initial;
  border-top: 1rpx solid #ccc;
  border-bottom: 0;
}

3.为每一个tab图标加上icon图标以及调整字体大小边距等

.weui-navbar__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 2px 0;
}

.weui-navbar__item image {
  width: 24px;
  height: 24px;
}

.weui-navbar__title {
  font-size: 12px;
}

.weui-navbar__slider {
  height: 2px;
}

配置项，我这里直接参考了小程序自身的tabBar

tabBar: {
	"selectedColor": "#5DBCFF",
	"normalColor": "#333",
	"list": [{
		"pagePath": "market/index/index",
		"iconPath": "images/icon_home.png",
		"selectedIconPath": "images/icon_home_selected.png",
		"text": "首页"
	}}]
},

最终效果

源码下载

关注订阅号【黄秀杰】或扫一扫下方二维码，回复关键字115