自定义小程序底部菜单

第一次写博客，如果有描述不当的地方，请多多包容，也欢迎指教。

做完第一个小程序的时候就觉得小程序的底部菜单有点坑，自己做的遮罩层根本无法遮住它，所以做第二个项目的时候，就决定自己模拟一个小程序底部菜单。下面说一下自己自定义底部菜单需要了解和注意的事项

1.小程序页面层级不能超过10级

2.小程序的wx.relaunch()可以清除所有页面痕迹并跳转至指定页面，但是，用户体验超级不好，跳转页面的时候会闪一下载跳转

3.小程序的wx.redirecto()关闭当前页面，跳转到应用内的某个页面，但是不允许跳转到 tabbar 页面。用户体验跟wx.relaunch()一样，让人看着就很不开心。

4.小程序的wx.navigateto()保留当前页面，跳转到应用内的某个页面，但是不能跳到 tabbar 页面。

5.小程序的wx.navigateBack可以通过delta返回至指定页面

综上所述，为了实现自定义的预想，又要解决用户体验问题。下面就是我的实现代码。

1.项目目录如上图

2.tabBar.wxml

<view class="wrapper">
  <view hidden='{{isModal}}' class='barModal'>
    <view bindtap="hideToCreate" class='modal_bg'></view>
    <view class='inte_ite'>
      <view class="tobarItem" bindtap="toNewPost">
        <image class="toImgbar" src="../../icon/index_material.png" />
        <view>发帖子</view>
      </view>
      <view class="tobarItem" bindtap="toNewDynamic">
        <image class="toImgbar" src="../../icon/index_enterprise.png" />
        <view>发动态</view>
      </view>
    </view>
  </view>
  <view class="wrappe_tab">
    <view bindtap='tabBarFun' class='item_con' id="{{item.id}}" wx:for="{{tabBarList}}" wx:key="id">
      <image wx:if="{{!item.isCouter}}" class="{{item.class}}" src="{{item.iconPath}}" />
      <image wx:if="{{item.isCouter}}" class="{{item.class}}" src="{{item.selectedIconPath}}" />
      <view class="{{item.isCouter?'tab_font isCouter':'tab_font'}}">{{item.text}}</view>
    </view>
  </view>
</view>

3.tabBar.js

const app = getApp();
Component({
  data: {
    isModal: true,
    tabBarList: [{
        pagePath: "pages/index/index",
        text: "首页",
        id: 1,
        isCouter: true,
        class: "tab_logo",
        color: "#888888",
        iconPath: "../../icon/indexIcon.png",
        selectedColor: "#2873ff",
        selectedIconPath: "../../icon/indexIconSe.png",
        link: '../index/index'
      },
      {
        pagePath: "pages/mall/mall",
        text: "商城",
        class: "tab_logo",
        id: 2,
        isCouter: false,
        iconPath: "../../icon/selectCarIcon.png",
        selectedIconPath: "../../icon/selectCarIconSe.png",
        link: '../mall/mall'
      },
      {
        pagePath: "pages/new/new",
        class: "logo_mid",
        id: 5,
        isCouter: true,
        iconPath: "../../icon/tabBar_new.png",
        selectedIconPath: "../../icon/tabBar_new.png"
      },
      {
        pagePath: "pages/message/message",
        text: "消息",
        class: "tab_logo",
        id: 3,
        isCouter: false,
        iconPath: "../../icon/consultingIcon.png",
        selectedIconPath: "../../icon/consultingIconSe.png",
        link: '../message/message'
      },
      {
        pagePath: "pages/mine/mine",
        text: "我的",
        id: 4,
        isCouter: false,
        class: "tab_logo",
        color: "#888888",
        selectedColor: "#2873ff",
        iconPath: "../../icon/myIcon1.png",
        selectedIconPath: "../../icon/myIconSe.png",
        link: '../mine/mine'
      }
    ]
  },
  ready: function(options) {
    var ts = this;
   // if (!app.pages){
      var pages = getCurrentPages();
    //}

    var currentPage = pages[pages.length - 1]; //获取当前页面的对象
    var url = currentPage.route; //当前页面url
    var list = this.data.tabBarList;
    console.log("pages");
    console.log(url);
    if (url == "pages/index/index") {
      list[0].isCouter = true;
      list[1].isCouter = false;
      list[4].isCouter = false;
      list[3].isCouter = false;
      this.setData({
        tabBarList: list,
      });
      //debugger
    } else if (url == "pages/mall/mall") {
      list[1].isCouter = true;
      list[0].isCouter = false;
      list[4].isCouter = false;
      list[3].isCouter = false;
      this.setData({
        tabBarList: list,
      });
    } else if (url == "pages/message/message") {
      list[3].isCouter = true;
      list[4].isCouter = false;
      list[1].isCouter = false;
      list[0].isCouter = false;
      this.setData({
        tabBarList: list,
      });
    } else if (url == "pages/mine/mine") {
      list[4].isCouter = true;
      list[0].isCouter = false;
      list[1].isCouter = false;
      list[3].isCouter = false;
      this.setData({
        tabBarList: list,
      });
    }
  },
  methods: {
    hideToCreate: function () {
      this.setData({
        isModal: true,
      });
    },
    toNewPost: function () {
      wx.navigateTo({
        url: '../index/newPost/newPost'
      });
      this.setData({
        isModal: true,
      });
    },
    toNewDynamic: function () {
      wx.navigateTo({
        url: "../index/newDynamic/newDynamic"
      });
      this.setData({
        isModal: true,
      });
    },
    tabBarFun: function(e) {
      // console.log(e);
      var ts = this;
      var id = Number(e.currentTarget.id);
      var list = this.data.tabBarList;

      var pages = app.pages;
      console.log('length:'+pages.length)
      var currentPage = pages[pages.length - 1]; //获取当前页面的对象

      var url = currentPage.route; //当前页面url
     // console.log(url);
      //console.log(id);
      let len = 0,
        flag = false;
     // debugger
      if (url != "pages/index/index" && id == 1) {
        for (let i = 0; i < pages.length; i++) {
          //// console.log(23);
          ++len;
          if (pages[i].route == "pages/index/index") {
         
            flag = true;
            break;
          }
        }
        console.log('len:index'+len);
        if (flag) {
          wx.navigateBack({
            delta: pages.length - len
          });
     
        } else {
          wx.navigateTo({
            url: 'pages/index/index'
          });
        }
      } else if (url != "pages/mall/mall" && id == 2) {
        for (let i = 0; i < pages.length; i++) {
          //// console.log(23);
          ++len;
          if (pages[i].route == "pages/mall/mall") {
            flag = true;
            break;
          }
        }
        console.log('len:mall' + len);
        if (flag) {
          wx.navigateBack({
            delta: pages.length - len
          });
        } else {
          wx.navigateTo({
            url: '/pages/mall/mall'
          });
        }
      } else if (url != "pages/message/message" && id == 3) {
        for (let i = 0; i < pages.length; i++) {
          console.log(23);
          ++len;
          if (pages[i].route == "pages/message/message") {
            flag = true;
            break;
          }
        }
        console.log('len:msg' + len);
        if (flag) {
          wx.navigateBack({
            delta: pages.length - len
          });
         
        } else {
          wx.navigateTo({
            url: '/pages/message/message'
          });
        }

      } else if (url != "pages/mine/mine" && id == 4) {
        for (let i = 0; i < pages.length; i++) {
          ++len;
          if (pages[i].route == "pages/mine/mine") {
            console.log(23);
            flag = true;
            break;
          }
        }
        console.log('len:mine' + len);
        if (flag) {
          wx.navigateBack({
            delta: pages.length - len
          });
        } else {
          wx.navigateTo({
            url: '/pages/mine/mine'
          });
        }

      } else if (id == 5) {
        this.setData({
          isModal: !this.data.isModal,
        })
      } 
    }
  }
})

 

4.tabBar.json

 { "component": true } 

 

5.tabBar.wxss

.wrapper{
  height: 100rpx;
}
.item_con {
  width: 20%;
  float: left;
  text-align: center;
  height: 100rpx;
  color: #444;
}

.modal_bg {
  background-color: rgba(100, 100, 100, 0.6);
  position: fixed;
  width: 100%;
  height: 100%;
}

.barModal {
  background-color: rgba(100, 100, 100, 0.6);
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  z-index: 1;
  top: 0;
}

.inte_ite {
  position: absolute;
  bottom: 100rpx;
  left: 0;
  width: 100%;
}

.toImgbar {
  width: 80rpx;
  height: 80rpx;
}

.inte_ite {
  background-color: #fff;
  padding: 10rpx;
}

.tobarItem {
  width: 50%;
  font-size: 28rpx;
  float: left;
  text-align: center;
}

.wrappe_tab {
  position: fixed;
  left: 0;
  z-index: 2;
  height: 100rpx;
  width: 100%;
  border-top: 1rpx solid #eee;
  bottom: 0;
  background-color: #fff;
}

.tab_logo {
  width: 45rpx;
  height: 38rpx;
  margin-top: 15rpx;
}

.tab_font {
  font-size: 28rpx;
  position: relative;
  top: -4rpx;
}

.logo_mid {
  width: 85rpx;
  height: 65rpx;
  margin-top: 17rpx;
}

.isCouter {
  color: #2873ff;
}

 

6.在需要用到的页面文件中使用，如

//index.js

 onShow(){  app.pages = getCurrentPages(); } 

 

//index.json

{
  "usingComponents": {
    "tabBar": "../../component/tabBar/tabBar"
  }
5 }

 

//index.wxml

 

 <tabBar></tabBar>