小程序如何写特殊底部导航

现在设计就是底部导航中间需要有一个大的加号按钮 而小程序本身没有操作tabbar的功能 只能设置文字 与选中不选中的图片

解决方式是

1.去掉app.json中 tabBar的配置

2.写一个公有的组件

tabbar.wxml

内容如下

<!--公共tabbar-->
<template name="tabbar">
    <view class="tabbar_box" style="background-color:{{tabbar.backgroundColor}}; {{tabbar.position == 'top' ? 'top:0' : 'bottom:0'}}">
        <block wx:for="{{tabbar.list}}" wx:for-item="item" wx:key="index">
            <navigator wx:if='{{index==1}}' class="tabbar_nav" url="{{item.pagePath}}" style="width:{{1/tabbar.list.length*100}}%; color:{{item.selected ? tabbar.selectedColor : tabbar.color}}" open-type="redirect">
                <image  class="tabbar_iconf" src="{{item.selected ? item.selectedIconPath : item.iconPath}}"></image>
            </navigator>
            <navigator wx:else class="tabbar_nav" url="{{item.pagePath}}" style="width:{{1/tabbar.list.length*100}}%; color:{{item.selected ? tabbar.selectedColor : tabbar.color}}" open-type="redirect">
                <image class="tabbar_icon" src="{{item.selected ? item.selectedIconPath : item.iconPath}}"></image>
                <text>{{item.text}}</text>
            </navigator>
        </block>
    </view>
</template>

tabbar.json

{
  "component": true,
  "usingComponents": {
  }
}

tabbar.js

Component({
    options: {
      multipleSlots: true // 在组件定义时的选项中启用多slot支持
    },
    properties: {

    },
    data: {
    },
});

现在公用底部导航有了 就差引入和js配置了 

3.在app.js中配置 tabbar的相关内容（切换操作 图片文本样式的配置）

//切换tabbar的方法  
 editTabBar: function(){
    var tabbar = this.globalData.tabbar,
        currentPages = getCurrentPages(),
        _this = currentPages[currentPages.length - 1],
        pagePath = _this.__route__;
    (pagePath.indexOf('/') != 0) && (pagePath = '/' + pagePath);
    for(var i in tabbar.list){
      tabbar.list[i].selected = false;
      (tabbar.list[i].pagePath == pagePath) && (tabbar.list[i].selected = true);
    }
    _this.setData({
      tabbar: tabbar
    });
  },

上边这个是切换tabbar的方法

//这个是配置的图片和文本 和再app.json中的一样哦
  globalData: {
    tabbar:{
      color: "#000000",
      selectedColor: "#FFB029",
      backgroundColor: "#ffffff",
      borderStyle: "black",
      list: [
        {
          pagePath: "/pages/index/index",
          text: "首页",
          iconPath: "../../images/index.png",
          selectedIconPath: "../../images/index-active.png",
          selected: true
        },
        {
          pagePath: "/pages/address/address",
          iconPath:"../../images/a.jpg",
          selectedIconPath: "../../images/a.jpg",
          selected: false
        },
        {
          pagePath: "/pages/me/me",
          text: "我的",
          iconPath: "../../images/me.png",
          selectedIconPath: "../../images/me-active.png",
          selected: false
        }
      ],
      position: "bottom"
    }
}

这个就是配置tabbar的图片文本这些个 和app.json配置很像哦

如果看不方便的话我把整个app.js贴出来

//app.js
App({
  onLaunch: function (options) {
    // 小程序启动逻辑
    // 1. 登录
    // 2. 查看用户是否授权
    // 3. 获取用户的设备信息
    var thisPage = this
    console.log(options)
    if(options.path!=='pages/index/index'){
      this.globalData.destPath = options.path
    }
    
    // 登录
    wx.login({
      success: res => {
        //todo 发送 res.code 到后台换取 openId, sessionKey, unionId
        wx.request({
          url: this.globalData.serverHost + '/sa/login',
          data: res.code,
          method: 'post',
          success: function(res){
            wx.hideLoading()
            if(res.data.code===0){
              thisPage.globalData.sessionToken = res.data.data.ticket
              if (!res.data.data.hasData){
                wx.redirectTo({
                  url: '/pages/index/auth',
                })
              } else {
                thisPage.globalData.authorized = true
              }
            } else {
              wx.showToast({
                title: '登录失败，请重新启动小程序',
                mask: true
              })
            }
          },
          fail: function(data){
            console.log(data)
          }
        })
      }
    })
    wx.showLoading({
      title: '登录中',
      mask: true
    })
  },
  editTabBar: function(){
    var tabbar = this.globalData.tabbar,
        currentPages = getCurrentPages(),
        _this = currentPages[currentPages.length - 1],
        pagePath = _this.__route__;
    (pagePath.indexOf('/') != 0) && (pagePath = '/' + pagePath);
    for(var i in tabbar.list){
      tabbar.list[i].selected = false;
      (tabbar.list[i].pagePath == pagePath) && (tabbar.list[i].selected = true);
    }
    _this.setData({
      tabbar: tabbar
    });
  },
  globalData: {
    tabbar:{
      color: "#000000",
      selectedColor: "#FFB029",
      backgroundColor: "#ffffff",
      borderStyle: "black",
      list: [
        {
          pagePath: "/pages/index/index",
          text: "首页",
          iconPath: "../../images/index.png",
          selectedIconPath: "../../images/index-active.png",
          selected: true
        },
        {
          pagePath: "/pages/address/address",
          iconPath:"../../images/a.jpg",
          selectedIconPath: "../../images/a.jpg",
          selected: false
        },
        {
          pagePath: "/pages/me/me",
          text: "我的",
          iconPath: "../../images/me.png",
          selectedIconPath: "../../images/me-active.png",
          selected: false
        }
      ],
      position: "bottom"
    },
    userInfo: null,
    authorized: false,
    systemInfo: null,
    systemInfoStr: null,
    sessionToken: ''
  }
})

3.在相关页面使用该写好的组件

我分别在首页 加号 我的三个页面引人该组件 我就先写出index页面 其他都一样哦

index.wxml 使用该组件

<import src="../../components/tabbar/tabbar.wxml"/>
  <template is="tabbar" data="{{tabbar}}"/>

index.json中引入该组件

{
  "usingComponents": {
    "tabbar": "../../components/tabbar/tabbar"
  }
}

index.js中加入切换的方法

  onLoad: function () {
    app.editTabBar(); 
  },

现在就可以啦

不过有一个问题就是切换页面的时候会出现闪一下的情况 应该是页面重新渲染加载的问题 前期还没想到解决方法 后期再继续研究 也可以请大神们指点