微信小程序 自定义底部导航栏

自定义底部导航需写一个共用模板： （名称自定义）

app.wxss:

/* iconfont小图标 */page {  font-size: 26rpx;  color: #666;}
.flex {  display: -webkit-flex;  display: flex;  width: 100%;}
/*  底部悬浮导航  */
.fix_nav_wp {  height: 133rpx;  position: fixed;  bottom: 0;  background: #fff;  box-shadow:0px 2px 30px 0px rgba(0,112,220,0.08);   z-index: 999;  align-items: center;}.fix_nav_wp .nav_link {  flex: 1;}
.fix_nav_wp button {  height: 95rpx;  display: flex;  justify-content: space-between;  align-items: center;  padding: 0;  font-size: 30rpx;  flex-direction: column;  color: #999;  position: relative;}
.fix_nav_wp .tip_tip {  position: absolute;  right: 25rpx;  top: 5rpx;  min-width: 28rpx;  line-height: 32rpx;  height: 32rpx;  padding: 0 8rpx;  color: #fff;  background: #f00;  border-radius: 50em;  border: 1rpx solid #fff;}
.fix_nav_wp .nav_link .iconfont {  height: 40rpx;  width: 39rpx;}
.fix_nav_wp .nav_link .plus_wp {  margin-top: 9rpx;}
.fix_nav_wp .nav_link  image {  width: 83rpx;  height: 83rpx;}
.fix_nav_wp .nav_link .txt {  height: 50rpx;  line-height: 40rpx;  color: #c4c8cc;}
.fix_nav_wp .nav_link.current .txt {  color: #00a2e9;}
.fix_nav_wp .nav_link .del_ico {  display: block;}
.fix_nav_wp .nav_link .cur_ico {  display: none;}
.fix_nav_wp .nav_link.current .del_ico {  display: none;}
.fix_nav_wp .nav_link.current .cur_ico {  display: block;  color: #00a2e9;}
.fix_nav_wp .nav_link .txt_fb {  line-height: 18rpx;}
.fix_nav_wp .nav_link .mp_ico {  font-size: 50rpx;  line-height: 80rpx;}
.fix_nav_wp .nav_link .xiaox_ico {  font-size: 64rpx;  line-height: 70rpx;}
.fix_nav_wp .nav_link .my_ico {  font-size: 56rpx;}
.fix_nav_wp .on_cor .del_ico, .fix_nav_wp .on_cor .txt {  color:#333333;  font-weight: bold;}
/* 清楚按钮的默认样式  */
.defalut_btn {  background: transparent;  border: none;  overflow: visible;  padding-left: 0;  padding-right: 0;  margin-left: 0;  margin-right: 0;  border-radius: 0;}
.defalut_btn:after {  display: none;}
.text-primary {  color: #00a2e9;}

app.js: 在全局变量里面定义

 //定义一个数组，数组每一项是对象，对象里面对应菜单的数据    
 //管理菜单的每一项的不同参数，还有不同布局结构需要的额外的参数    
 navData: [{      
      name: "首页", //文本      
      current: 1, //是否是当前页，0不是  1是      
      style: 0, //样式     
      icoSrc: '/pages/images/icon/selectedindexicon.png', //不同图标     
       fn: 'gotoCompanyIndex', //对应处理函数   
        },  {     
      name: "",      
      current: 0,      
      style: 1,      
      icoSrc: '',     
      fn: 'gotoProjectInfoList',
    },  {     
     name: "我的",      
     current: 0,      
     style: 0,     
     icoSrc: '/pages/images/icon/usericon.png',      
     fn: 'gotoUserInfo',      
     msg: 0, //因为消息是这个“消息”特有的，所以只有这个对象下游msg键值    
     }]

//用户底部tab切换
  tabBarGotoPage(pageUrl) {    
    wx.switchTab({      
      url: '../' + pageUrl + "/" + pageUrl,   
     })  
 },

应方法需要：我把对应的处理函数封装了一下
//用来处理底部icon切换的样式 第一个为选中 ，则其它为未选中状态，点击切换，则样式调转

swicthIconStyle(navData, theirOwnIndex, anotherIndex, theirOwnImg, anotherImg) {    
       var navArr = navData; //得到数组   
        if (navData[theirOwnIndex].current == 0) {      
        //如何为选中状态 其它的就为未选中状态      
        navArr[anotherIndex].current = 0,        
        navArr[anotherIndex].icoSrc = anotherImg,        
        navArr[theirOwnIndex].current = 1,        
        navArr[theirOwnIndex].icoSrc = theirOwnImg;   
         }    
        return navArr;  
},

index.wxml: