微信小程序自定义tabBar（实操）

一、前言

实现步骤

1、添加images文件，添加想要的矢量图（可通过免费获取） 2、在app.json文件中，编辑代码 3、保存，刷新即可

完整代码-矢量图

images图片

app.json代码

{
          
   
  "pages":[
    "pages/index/index",
    "pages/logs/index",
    "pages/commdt/index",
    "pages/cart/index",
    "pages/mymessage/index"
  ],
  "window":{
          
   
    "backgroundTextStyle":"light",
    "navigationBarTitleText": "测试tabbar",
    "navigationBarTextStyle":"white"
  },
  "tabBar": {
          
   
    "color": "#B6B6B6",
    "selectedColor": "#FE9132",
    "list": [
      {
          
   
        "pagePath":"pages/index/index",
        "text": "首页",
        "iconPath":"/images/sy2.png",
        "selectedIconPath": "/images/sy1.png"
      },
      {
          
   
        "pagePath":"pages/commdt/index",
        "text": "商品",
        "iconPath":"/images/sp2.png",
        "selectedIconPath": "/images/sp1.png"
      },
      {
          
   
        "pagePath":"pages/cart/index",
        "text": "购物车",
        "iconPath":"/images/gwc2.png",
        "selectedIconPath": "/images/gwc1.png"
      },
      {
          
   
        "pagePath":"pages/mymessage/index",
        "text": "我的",
        "iconPath":"/images/wd2.png",
        "selectedIconPath": "/images/wd1.png"
      }
    ]
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

实现步骤

1、添加images文件，添加想要的矢量图（可通过免费获取） 2、在app.json文件中，编辑代码 3、点击加号，在根目录新建一个custom-tab-bar文件夹 4、然后右键该文件夹，点击新建components，输入index，回车，就会自动创建四个文件 此时我们可以看到小程序底部出现，就代表创建成功了。因为他自动识别了tabBar页面。 然后在该目录下编写代码即可

完整代码-矢量图

images图片

app.json代码

"window":{
          
   
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#FFFFFF",
    "navigationBarTitleText": "摆烂鸭",
    "navigationBarTextStyle":"black"
  },
  "tabBar":{
          
   
    "custom": true,
    "list":[
      {
          
   
        "pagePath":"pages/index/index",
        "text":"摆鸭"
      },{
          
   
        "pagePath":"pages/commdt/index",
        "text":"不鸭"
      }
    ]
  },

custom-tab-bar下的代码

index.wxml

<cover-view class="tab-bar">
  <!-- <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 class="{
          
   {currentName ==  item.name ? text-active : tabbar-text}}">{
          
   {
          
   item.text}}</cover-view> -->
  </cover-view>
</cover-view>

index.css

.tab-bar {
          
   
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 130rpx;
  background: white;
  display: flex;
  padding-bottom: env(safe-area-inset-bottom);
  justify-content: center;
}


.tab-bar-item {
          
   
  text-align: center;
  display: flex;
  flex-direction: column;
}

.tab-bar-item cover-image {
          
   
  width: 240rpx;
  height: 100rpx;
}

.tab-bar-item cover-view {
          
   
  font-size: 10px;
}

index.js

Component({
          
   
  /**
   * 组件的属性列表
   */
  properties: {
          
   

  },

  /**
   * 组件的初始数据
   */
  data: {
          
   
    selected: 0,
    color: "#7A7E83",
    selectedColor: "#3cc51f",
    list: [{
          
   
      "pagePath": "/pages/index/index",
      "iconPath": "/images/by3.png",
      "selectedIconPath": "/images/by1.png",
      "text": "摆鸭"
    }, {
          
   
      "pagePath": "/pages/commdt/index",
      "iconPath": "/images/by2.png",
      "selectedIconPath": "/images/by4.png",
      "text": "不鸭"
    }]
  },

  /**
   * 组件的方法列表
   */
  methods: {
          
   
    switchTab(e) {
          
   
      console.log("执行跳转", e);
      const data = e.currentTarget.dataset
      const url = data.path
      wx.switchTab({
          
   
        url
      })
      this.setData({
          
   
        selected: data.index
      })
    }
  }
})

使用自定义TaBar

/**
   * 生命周期函数--监听页面显示
   */
  onShow() {
          
   
    if (typeof this.getTabBar === function &&
      this.getTabBar()) {
          
   
      this.getTabBar().setData({
          
   
        //唯一标识（其它设置不同的整数）  
        selected: 0
      })
    }
  },

/pages/commdt/index 的.js页面添加代码

/**
   * 生命周期函数--监听页面显示
   */
  onShow() {
          
   
    if (typeof this.getTabBar === function &&
      this.getTabBar()) {
          
   
      this.getTabBar().setData({
          
   
        //唯一标识（其它设置不同的整数）  
        selected: 1
      })
    }
  },

免责声明：本文章仅用于学习参考