小程序自定义tabbar

不靠谱的作曲家

已于 2023-09-12 18:00:08 修改

阅读量1.2k

点赞数

分类专栏：微信小程序文章标签：小程序

于 2023-09-12 17:52:26 首次发布

本文链接：https://blog.csdn.net/qq_37332614/article/details/132835957

版权

微信小程序专栏收录该内容

30 篇文章 0 订阅

订阅专栏

前言

使用小程序默认的tabbar可以满足常规开发，但是满足不了个性化需求，如果想个性化开发就需要用到自定义tabbar,以下图为例子
在这里插入图片描述

一、在app.json配置

先按照以往默认的形式配置，如果中间的样式特殊则不需要配置

"tabBar": {
  "custom":true,  // 开启自定义tabbar
  "color": "#333333",  // tabbar文字默认颜色
  "selectedColor": "#2E41FF", // tabbar文字选中颜色
  "list": [
    {
      "pagePath": "pages/index/index",
      "iconPath": "images/customTabBar/home.png",
      "selectedIconPath": "images/customTabBar/homeSelect.png",
      "text": "首页"
    },
    {
      "pagePath": "pages/user/user",
      "iconPath": "images/customTabBar/my.png",
      "selectedIconPath": "images/customTabBar/mySelect.png",
      "text": "我的"
    }
  ]
},

二、在app.js中配置

tabBar: {
  "color": "#333333",
  "selectedColor": "#2E41FF",
  "list": [{
      "pagePath": "/pages/index/index",
      "iconPath": "/images/customTabBar/home.png",
      "selectedIconPath": "/images/customTabBar/homeSelect.png",
      "text": "首页",
      "selected":true  //该tabbar是否选中的标识
    },
    {
      "pagePath": '',
      "iconPath": '/images/customTabBar/camera.png',
      "selectedIconPath": '/images/customTabBar/camera.png',
      "isSpecial": true,  //是否为特殊的那个tab
      "selected":false
    },
    {
      "pagePath": "/pages/user/user",
      "iconPath": "/images/customTabBar/my.png",
      "selectedIconPath": "/images/customTabBar/mySelect.png",
      "text": "我的",
      "selected":false
    }
  ]
}

三、app.js注册tabbar点击方法

主要作用为控制跳转的路径当前tab及选中的样式

editTabbar() {
  let tabbar = this.globalData.tabBar;
  let currentPages = getCurrentPages();
  let _this = currentPages[currentPages.length - 1];
  let pagePath = _this.route;
  (pagePath.indexOf('/') != 0) && (pagePath = '/' + pagePath);
  for (let i in tabbar.list) {
    tabbar.list[i].selected = false;
    (tabbar.list[i].pagePath == pagePath) && (tabbar.list[i].selected = true);
  }
  _this.setData({
    tabbar: tabbar
  });
},

四、封装自定义tabbar组件

1.html

<view class="ub-tab-bar">
  <block wx:for="{{tabbar.list}}" wx:key="index">
  <!-- 中间特殊tab -->
    <view wx:if="{{item.isSpecial}}" class="ub-tab-bar-item" bindtap="camera">
      <image mode="widthFix" src="{{item.iconPath}}" class="{{item.pagePath === '' ? 'ub-camera' : ''}}"></image>
      <view>{{item.text}}</view>
    </view>
  <!-- 两侧tab -->  
    <navigator wx:else class="ub-tab-bar-item" hover-class="none" url="{{item.pagePath}}" style="color:{{item.selected ? tabbar.selectedColor : tabbar.color}}" open-type="switchTab">
      <image mode="widthFix"  src="{{item.selected ? item.selectedIconPath : item.iconPath}}"></image>
      <view>{{item.text}}</view>
    </navigator>
  </block>
</view>

2.json

接收父组件传过来的值

properties: {
  tabbar: {
    type: Object
  }
},

五、在用到的页面引用tabbar组件

在需要用到tabbar的页面引用

1.json中引用

 "usingComponents": {
    "tabBar": "/components/customTabBar/customTabBar",
  }

2.js

data中获取在app.js定义的tabBar

data: {
	tabBar:app.globalData.tabBar
}
//隐藏移动的tabbar并调用app.js定义的方法
onLoad(){
	wx.hideTabBar()
	app.editTabbar();
}

3.html中引用

获取到的方法想子组件中传递

<tabBar tabbar="{{tabBar}}"></tabBar>