自定义微信小程序TabBar

自定义封装微信小程序tabBar

• 先创建文件夹

  • 图标：images文件夹下的icon
  • 先删除原来pages文件夹下的页面
  • 在重新在pages文件夹下新建四个页面，分别是：
    • chat：消息
    • doc：文档
    • home：首页
    • profile：我的
  • 新建一个自定义组件来渲染tabBar
    • 根目录下，文件名必须是custom-tab-bar（不能是components）

• 目录结构：

  

• 在app.json配置（"custom": true,为自定义组件的意思。usingComponents使用组件的意思，注册自定义组件。同时其余 tabBar 相关配置也补充完整）

  {
    "pages":[
      "pages/home/index",
      "pages/doc/index",
      "pages/chat/index",
      "pages/profile/index"
    ],
    "window":{
      "backgroundTextStyle":"light",
      "navigationBarBackgroundColor": "#fff",
      "navigationBarTitleText": "Weixin",
      "navigationBarTextStyle":"black"
    },
    "tabBar": {
      "color":"#1694DD",
      "selectedColor": "#FA314A",
      "backgroundColor":"#f9f9f910",
      "borderStyle":"black",
      "position": "bottom",
      "custom": true,
      "list": [
        {
          "pagePath":"pages/home/index",
          "text":"首页",
          "iconPath":"/images/icon/home.png",
          "selectedIconPath": "/images/icon/home_selected.png"
        },
        {
          "pagePath":"pages/doc/index",
          "text":"文档",
          "iconPath":"/images/icon/document.png",
          "selectedIconPath": "/images/icon/document_selected.png"
        },
        {
          "pagePath":"pages/chat/index",
          "text":"消息",
          "iconPath":"/images/icon/chat.png",
          "selectedIconPath": "/images/icon/chat_selected.png"
        },
        {
          "pagePath":"pages/profile/index",
          "text":"我的",
          "iconPath":"/images/icon/user.png",
          "selectedIconPath": "/images/icon/user_selected.png"
        }
      ]
    },
    "usingComponents": {
      "tabbar":"./custom-tab-bar/index"
    },
    "style": "v2",
    "sitemapLocation": "sitemap.json"
  }
  

• 在custom-tab-bar中的index.wxml里面

  <view class="tab-bar">
    <block wx:for="{{list}}" wx:key="index">
      <view class="tab-bar-item" bindtap="switchTop" data-active="{{index}}" data-url="{{item.url}}">
        <image src="{{active===index?item.select_icon:item.icon}}" class="icon"></image>
        <view> {{item.title}}</view>
      </view>
    </block>
  </view>
  

• 在custom-tab-bar中的index.wxss里面

  .tab-bar {
    display: flex;
    text-align: center;
    height: 96rpx;
    border-top: 1rpx solid rgba(0, 0, 0, 0.3);
    font-size: 26rpx;
    padding: 6rpx 0;
  }
  .tab-bar-item {
    flex: 1;
  }
  .icon {
    width: 48rpx;
    height: 48rpx;
  }
  

• 在custom-tab-bar中的index.js里面

  // custom-tab-bar/index.js
  Component({
    /**
     * 组件的属性列表
     */
    properties: {
  
    },
  
    /**
     * 组件的初始数据
     */
    data: {
      active:0,
      list: [
        {title:'首页',url:'/pages/home/index',icon:'../images/icon/home.png',select_icon:'../images/icon/home_selected.png'},
        {title:'消息',url:'/pages/chat/index',icon:'../images/icon/chat.png',select_icon:'../images/icon/chat_selected.png'},
        {title:'文档',url:'/pages/doc/index',icon:'../images/icon/document.png',select_icon:'../images/icon/document_selected.png'},
        {title:'我的',url:'/pages/profile/index',icon:'../images/icon/user.png',select_icon:'../images/icon/user_selected.png'},
      ]
    },
  
    /**
     * 组件的方法列表
     */
    methods: {
      switchTop(e) {
        // console.log(e);
        const {active,url} = e.currentTarget.dataset
        this.setData({active})
        wx.switchTab({
          url
        })
      }
    }
  })
  

• 为了防止跳转bug，需要在每个页面的onshow生命周期中调用getTabBar（），设置被选中的下标

  • 在pages文件夹里面的home页面中的index.js

      /**
       * 生命周期函数--监听页面显示
       */
      onShow() {
        this.getTabBar().setData({active:0})
      },
    

  • 在pages文件夹里面的chat页面中的index.js

      /**
       * 生命周期函数--监听页面显示
       */
      onShow() {
        this.getTabBar().setData({active:1})
      },
    

  • 在pages文件夹里面的doc页面中的index.js

      /**
       * 生命周期函数--监听页面显示
       */
      onShow() {
        this.getTabBar().setData({active:2})
      },
    

  • 在pages文件夹里面的profile页面中的index.js

      /**
       * 生命周期函数--监听页面显示
       */
      onShow() {
        this.getTabBar().setData({active:3})
      },
    

• 页面展示效果