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

阳光穿透心脏的1/2处 2024-03-31 08:47 70阅读 0赞

#### 文章目录 ####

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

### 一、前言 ###

一般使用tabBar的样式，固定不能改变。如下固定效果图：  
![在这里插入图片描述][d82329c3927d430ea9e7da15fa17ef34.png_pic_center]

如何自定义自己想要的效果图呢，举个例子。如下自定义效果图：  
![在这里插入图片描述][59c91584122d490daa666142b1c95b2f.png_pic_center]

### 二、固定效果图实现步骤 ###

使用微信开发者工具-创建项目我就不说了，[官方文档][Link 1]很详细。  
参考：[官方文档介绍][Link 2]

#### 实现步骤 ####

1、添加images文件，添加想要的矢量图（可通过[阿里巴巴矢量图][Link 3]免费获取）  
2、在app.json文件中，编辑代码  
3、保存，刷新即可  
![在这里插入图片描述][bca95010325344359876c99fb1bd6f70.png_pic_center]

#### 完整代码-矢量图 ####

##### images图片 #####

![在这里插入图片描述][fb53617c767643f9a0abfc88c0877721.png_pic_center]  
![在这里插入图片描述][0adc74dc67db4858afa83e9a48ff9ba9.png_pic_center]  
![在这里插入图片描述][4d554936457f4b58bfa3a7aadd33cb68.png_pic_center]  
![在这里插入图片描述][447a932c587f474f8f5ff531062e6c41.png_pic_center]  
![在这里插入图片描述][761f3fa7aa36464e9a6fd4ac0aac0c97.png_pic_center]  
![在这里插入图片描述][1908daf964524d75ad6407dee3f4565c.png_pic_center]  
![在这里插入图片描述][d828c1da97d6487a8b1d3f753a923f6e.png_pic_center]  
![在这里插入图片描述][70710f2c8ec84f6893ba1cac16f9675f.png_pic_center]

##### 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文件，添加想要的矢量图（可通过[阿里巴巴矢量图][Link 3]免费获取）  
2、在app.json文件中，编辑代码  
3、点击加号，在根目录新建一个**custom-tab-bar**文件夹  
4、然后右键该文件夹，点击新建components，输入index，回车，就会自动创建四个文件  
此时我们可以看到小程序底部出现，就代表创建成功了。因为他自动识别了tabBar页面。  
然后在该目录下编写代码即可  
![在这里插入图片描述][49b997be7ea941a9b4e4427f10e2df63.png_pic_center]

#### 完整代码-矢量图 ####

##### images图片 #####

![在这里插入图片描述][2888d8d4c1a742fcb5910652b7534124.png_pic_center]  
![在这里插入图片描述][d83ce77ed1cf4f8baaf25a55acc428ee.png_pic_center]  
![在这里插入图片描述][27020c829f154f67a779176a185ef633.png_pic_center]  
![在这里插入图片描述][b60aaf2322754157b13b30fddf29967a.png_pic_center]

##### 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 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>
    </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
          })
        }
      },

![在这里插入图片描述][08f9558237d147968447453d18ed0146.jpeg_pic_center]

> 各位看官》创作不易，点个赞！！！  
> 诸君共勉：万事开头难，只愿肯放弃。

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

[d82329c3927d430ea9e7da15fa17ef34.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/88c14dee06a841feb12ddb09d5b4c65f.png
[59c91584122d490daa666142b1c95b2f.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/aedec2f0e9394877a2fc147478b635ad.png
[Link 1]: https://developers.weixin.qq.com/miniprogram/dev/framework/quickstart/getstart.html
[Link 2]: https://developers.weixin.qq.com/miniprogram/dev/framework/ability/custom-tabbar.html
[Link 3]: https://www.iconfont.cn/
[bca95010325344359876c99fb1bd6f70.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/cebaec32d65a4dc3b1610703b4890c00.png
[fb53617c767643f9a0abfc88c0877721.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/00dc732d95e940aa9aacba45d8f042b8.png
[0adc74dc67db4858afa83e9a48ff9ba9.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/05dc4b22a7fc4ea68de974c1ee3adeb8.png
[4d554936457f4b58bfa3a7aadd33cb68.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/2ebe4bd68c1a4a28adff36dc01277a12.png
[447a932c587f474f8f5ff531062e6c41.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/3562e8c3f08946f690a2c2c6428e88d3.png
[761f3fa7aa36464e9a6fd4ac0aac0c97.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/8919b8cec4aa495587a63f5f87fdb748.png
[1908daf964524d75ad6407dee3f4565c.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/823de6953193405dbc34e7aa676de5c3.png
[d828c1da97d6487a8b1d3f753a923f6e.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/728c5a11e39d42d092470b3a5dc6cc5f.png
[70710f2c8ec84f6893ba1cac16f9675f.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/87591c1f075b453aa01752dfeba4c397.png
[49b997be7ea941a9b4e4427f10e2df63.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/938cd3afe52649e8b82103ffcc49d149.png
[2888d8d4c1a742fcb5910652b7534124.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/08dba024f8bd440584a2a3ead766f978.png
[d83ce77ed1cf4f8baaf25a55acc428ee.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/bbf923fa61a64c5f95ae07873d8b6afa.png
[27020c829f154f67a779176a185ef633.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/4e3e2d508cdd419f878e1ea8c593fda3.png
[b60aaf2322754157b13b30fddf29967a.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/79b0ed4c7cf3492595df954a4579459a.png
[08f9558237d147968447453d18ed0146.jpeg_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/6665afad0d454e27abdb1f9c25ad9f4a.jpeg