微信小程序之如何自定义底部tabbar导航

清疚 2023-07-05 05:24 3阅读 0赞

**在app.json里放入tabbar**  
注释：这里的tabbar不会展示，但是一定要写上

{ 
      "pages": [
        "pages/index/index",
        "pages/my/index"
      ],
      "window": { 
        "backgroundTextStyle": "light",
        "navigationBarBackgroundColor": "#fff",
        "navigationBarTitleText": "WeChat",
        "navigationBarTextStyle": "black"
      }, 
      "tabBar": { 
        "custom": true,  
        "color": "#7A7E83",
        "selectedColor": "#333333",
        "borderStyle": "black",
        "backgroundColor": "#ffffff",
        "list": [
          { 
            "pagePath": "pages/index/index",
            "iconPath": "assets/img/1.png",
            "selectedIconPath": "assets/img/1s.png",
            "text": "保单万事通"
          },{ 
            "pagePath": "pages/my/index",
            "iconPath": "assets/img/2.png",
            "selectedIconPath": "assets/img/2s.png",
            "text": "保单万事通"
          }
        ]
      },
      "style": "v2",
      "sitemapLocation": "sitemap.json"
    }

注意我加了一个属性 `"custom": true`，这个如果不加，就只能使用微信自带的tabbar底部导航了，无法按照自己的想法设计，所以，当你加了custom这个属性后，你只需要，

## **`在根目录下，添加一个组件 cumtom-tab-bar,你甚至都不需要去引进，小程序会自己去找这个组件，切记，放到根目录下（注释： cumtom-tab-bar与pages同级，同时 cumtom-tab-bar里面的文件要以index命名，不然会报错）`** ##

，然后，你就可以随心所欲控制底部tabbar了

如图  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI2MjgyODY5_size_16_color_FFFFFF_t_70]

**cumtom-tab-bar组件**

js：
    
    Component({ 
      data: { 
        selected: 0,
        color: "#7A7E83",
        selectedColor: "#333333",
        canCustom: true,
        list: [
          { 
            "pagePath": "/pages/index/index",
            "iconPath": "/assets/img/1.png",
            "selectedIconPath": "/assets/img/1s.png",
            "text": "首页"
          },{ 
            "pagePath": "/pages/my/index",
            "iconPath": "/assets/img/2.png",
            "selectedIconPath": "/assets/img/2s.png",
            "text": "我的"
          }
        ]
      },
      created(){ 
       
      },
      lifetimes: { 
        attached: function () { 
          
          
          // getApp().watch(this.watchBack,this)
         
        },
      },
      attached: function () { 
        // getApp().watch(this.watchBack, this)
    
      },
    
    
      methods: { 
    
        switchTab(e) { 
          const data = e.currentTarget.dataset
          const url = data.path;
          console.log(url);
          var pages = getCurrentPages() //获取加载的页面
    
          // var currentPage = pages[pages.length - 1] //获取当前页面的对象
    
          // var urls = currentPage.route //当前页面url
    
         // var options = currentPage.options //如果要获取url中所带的参数可以查看options
         // console.log("route = ", urls);
          console.log(url)
          if (url == "/pages/add/add"){ 
            getApp().globalData.switctTime++;
            if (getApp().globalData.switctTime>1){ 
              getApp().globalData.switctTime = 0;
          
              wx.switchTab({ 
                url: getApp().globalData.userUrl
              })
              return false;
            }else{ 
              wx.switchTab({ 
                url:"/pages/add/add"
              })
              return false;
            }
            
            // if (urls == "pages/add/add"){ 
            // getApp().globalData.userUrl = 1
            // }
          }else{ 
            getApp().globalData.switctTime = 0;
            getApp().globalData.userUrl = url;
          }
          // if(url==undefined){ 
          // this.setData({ 
          // selected: data.index
          // }) 
          // return;
          // }
          wx.switchTab({ 
            url:url
          })
          this.setData({ 
            selected: data.index
          })
        }
      }
    })
    wxml：
    
    
    <cover-view id='customTabBar' class="tab-bar" wx:if="{ {canCustom}}">
    
      <cover-view class="tab-bar-border"></cover-view>
      <cover-view wx:for="{ {list}}" wx:key="index" class="tab-bar-item" data-path="{ {item.pagePath}}" data-index="{ {index}}" bindtap="switchTab">
        <cover-image src="{ {selected === index ? item.selectedIconPath : item.iconPath}}"></cover-image>
        <cover-view style="color: { {selected === index ? selectedColor : color}}">{ { item.text}}</cover-view>
    
      </cover-view>
    
    
    
    </cover-view>
    wxss：
    
    .tab-bar { 
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      height: 48px;
      background: white;
      display: flex;
      padding-bottom: env(safe-area-inset-bottom);
      z-index: 10000;
    }
    
    .tab-bar-border { 
      background-color: rgba(0, 0, 0, 0.33);
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 1px;
      transform: scaleY(0.5);
    }
    
    .tab-bar-item { 
      flex: 1;
      text-align: center;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      position: relative;
    }
    
    .tab-bar-item cover-image { 
      width: 27px;
      height: 27px;
    }
    
    .tab-bar-item cover-view { 
      font-size: 10px;
    }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI2MjgyODY5_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200213151355235.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI2MjgyODY5,size_16,color_FFFFFF,t_70