小程序自定义tabbar

前言

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

一、在app.json配置

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

javascript 复制代码
"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中配置

javascript 复制代码
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及选中的样式

javascript 复制代码
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

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

接收父组件传过来的值

javascript 复制代码
properties: {
  tabbar: {
    type: Object
  }
},

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

在需要用到tabbar的页面引用

1.json中引用

javascript 复制代码
 "usingComponents": {
    "tabBar": "/components/customTabBar/customTabBar",
  }

2.js

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

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

3.html中引用

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

html 复制代码
<tabBar tabbar="{{tabBar}}"></tabBar>
相关推荐
2501_915918413 小时前
Fiddler中文版全面评测:功能亮点、使用场景与中文网资源整合指南
android·ios·小程序·https·uni-app·iphone·webview
说私域5 小时前
从品牌附庸到自我表达:定制开发开源AI智能名片S2B2C商城小程序赋能下的营销变革
人工智能·小程序
難釋懷5 小时前
第一个小程序
小程序
春哥的研究所5 小时前
可视化DIY小程序工具!开源拖拽式源码系统,自由搭建,完整的源代码包分享
小程序·开源·开源拖拽式源码系统·开源拖拽式源码·开源拖拽式系统
weixin_lynhgworld5 小时前
盲盒一番赏小程序技术实现方案:高并发与防作弊的平衡之道
小程序
今日热点6 小时前
小程序主体变更全攻略:流程、资料与异常处理方案
经验分享·微信·小程序·企业微信·微信公众平台·微信开放平台
鸭鸭梨吖11 小时前
微信小程序---下拉框
微信小程序·小程序
mon_star°14 小时前
搭建一款结合传统黄历功能的日历小程序
微信·微信小程序·小程序·微信公众平台
The_era_achievs_hero14 小时前
微信小程序91~100
微信小程序·小程序
假装我不帅14 小时前
微信小程序下拉加载更多实现
微信小程序·小程序