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

文章目录

- 一、前言
- 二、固定效果图实现步骤
- - 实现步骤
  - 完整代码-矢量图
  - - images图片
    - app.json代码
- 三、自定义效果图实现步骤
- - 实现步骤
  - 完整代码-矢量图
  - - images图片
    - app.json代码
    - custom-tab-bar下的代码
    - 使用自定义TaBar

一、前言

一般使用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

使用自定义TabBar，在切换的TabBar界面的onShow中添加如下代码。如首页中设置 selected: 0，我的中设置 selected: 2。因为 selected: 1 是特殊跳转，点击加号图标时，不再是切换tabbar，而是直接跳转发布界面了。
例如：
/pages/index/index 的.js页面添加代码

  /**
   * 生命周期函数--监听页面显示
   */
  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
      })
    }
  },