小程序自定义tabbar

前言

使用小程序默认的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>
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值