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

阳光穿透心脏的1/2处 2021-09-19 22:02 514阅读 0赞

tabbar.wxml

app.wxss

/* --- 自定义导航栏--- */
    .menu-item{ 
      
      width: 32%;  
      float: left;  
      text-align: center;  
      padding-top: 10rpx;  
      font-size: 28rpx;
    }  
    .menu-item1{  
      width: 24%;  
      float: left;  
      text-align: center;  
      padding-top: 10rpx; 
       font-size: 28rpx; 
    }  
    .menu-img{ 
      width: 44rpx;  
      height: 44rpx;  
      display: block;  
      margin:auto;  
    }  
    .menu-clear{  
      /* clear: both;   */
    }  
    .menu-tab-bar{  
      border-top: 2rpx solid #dfdfdf;
      position: fixed;  
      width: 100%;  
      padding: 0px 2%;  
    }

app.js

// <----------   自定义导航栏
      editTabBar: function () {
        //使用getCurrentPages可以获取当前加载中所有的页面对象的一个数组，数组最后一个就是当前页面。
    
        var curPageArr = getCurrentPages();    //获取加载的页面
        var curPage = curPageArr[curPageArr.length - 1];    //获取当前页面的对象
        var pagePath = curPage.route;    //当前页面url
        if (pagePath.indexOf('/') != 0) {
          pagePath = '/' + pagePath;
        }
    
        var tabBar = this.globalData.tabBar;
        for (var i = 0; i < tabBar.list.length; i++) {
          tabBar.list[i].active = false;
          if (tabBar.list[i].pagePath == pagePath) {
            tabBar.list[i].active = true;    //根据页面地址设置当前页面状态    
          }
        }
        curPage.setData({
          tabBar: tabBar
        });
      },
     
      globalData: {
        //底部导航栏显示
        tabBar: {
          // 默认字体颜色
          "color": "#b8b8b8",
          // 上边线颜色
          // "borderStyle": "#ccc",
          "list": [
            {
              "pagePath": "/pages/home/index",
              "text": "首页",
              "iconPath": "/img/tabbar/home1.png",
              "selectedIconPath": "/img/tabbar/home2.png",
              "clas": "menu-item",
              // 选定导航栏字体颜色
              "selectedColor": "#f4643a",
              active: true
            },
            {
              "pagePath": "/pages/find/index",
              "text": "发现",
              "iconPath": "/img/tabbar/find1.png",
              "selectedIconPath": "/img/tabbar/find2.png",
              "selectedColor": "#f4643a",
              "clas": "menu-item",
              active: false
            },
            {
              "pagePath": "/pages/my/index",
              "text": "我的",
              "iconPath": "/img/tabbar/my1.png",
              "selectedIconPath": "/img/tabbar/my2.png",
              "selectedColor": "#f4643a",
              "clas": "menu-item",
              active: false
            }
          ],
          "position": "bottom",
           "sitemapLocation": "sitemap.json"
        },
    
      },
      // ------------>

需要用到的页面

wxml

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

var app = getApp();
    Page({
    data:{}
    onLoad:function(options){
    
    }
    })

此导航栏有个bug每次切换页面都会从新加载