微信小程序系列十：自定义底部导航

比较简单代码就不多贴。

template:

<template name="tabbar">
  <view class="weui-tabbar">
    <block wx:for="{{list}}" wx:key="index" wx:for-item="item">
      <navigator url="{{item.url}}" hover-class='none' class="weui-tabbar__item weui-bar__item_on">
        <image src='/image/home.png' class="weui-tabbar__icon"></image>
        <view class="weui-tabbar__label">{{item.name}}</view>
      </navigator>
    </block>
  </view>
</template>

这里样式采用weui的底部导航样式：

.weui-tabbar {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  position: absolute;
  z-index: 500;
  bottom: 0;
  width: 100%;
  background-color: #f7f7fa;
}

.weui-tabbar:before {
  content: " ";
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  height: 1px;
  border-top: 1px solid #c0bfc4;
  color: #c0bfc4;
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
  -webkit-transform: scaleY(0.5);
  transform: scaleY(0.5);
}

.weui-tabbar__item {
  display: block;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  flex: 1;
  padding: 5px 0 0;
  font-size: 0;
  color: #999;
  text-align: center;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.weui-tabbar__item.weui-bar__item_on .weui-tabbar__icon,
.weui-tabbar__item.weui-bar__item_on .weui-tabbar__icon > i,
.weui-tabbar__item.weui-bar__item_on .weui-tabbar__label {
  color: #09bb07;
}

.weui-tabbar__icon {
  display: inline-block;
  width: 27px;
  height: 27px;
}

.weui-tabbar__label {
  text-align: center;
  color: #999;
  font-size: 10px;
  line-height: 1.8;
}

使用方法：在需要使用页面引入模板

<import src="/template/tabbar.wxml" />

<template is="tabbar" data="{{item}}"></template>

代码不全，不懂得可以留言