微信小程序——自定义菜单tabbar

一、全局配置

在app.json里面配置 pages、usingComponents 和 tabBar

"pages": [
    "pages/page1/index",
    "pages/page2/index",
    "pages/page3/index",
    "pages/page4/index",
    "pages/page5/index"
], 
"usingComponents": {
    "um-tabbar": "/components/um-tabbar/index"
},
"tabBar": {
    "borderStyle": "white",
    "list": [
      { "pagePath": "pages/page1/index" },
      { "pagePath": "pages/page2/index" },
      { "pagePath": "pages/page4/index" },
      { "pagePath": "pages/page5/index" }
     ]
}

注:

1、此处 tabBar 下的 list 必须配置跳转页面的路径,否则自定义组件里面的 wx.switchTab 方法将不能调用

2、全局 usingComponents 没有配置时,需要在引用页面的json文件下配置 usingComponents

二、自定义组价

components/um-tabbar目录下

1、icons(该目录存放你的图标资源,也可放在项目的assets目录下)

2、index.wxml

<view class=‘box-tabbar‘ style=‘height:{{tabHeight}}rpx;‘>
  <view wx:for="{{tabs}}" wx:key="{{item.content}}" class=‘item‘ bindtap=‘handleClick‘ data-index=‘{{index}}‘>      
    <image src=‘{{(activeIndex==index)?item.activeImg:item.inactiveImg}}‘ wx:if="{{item.activeImg}}"></image>
    <view wx:if="{{item.content}}" style="color:{{(activeIndex==index)?tabStyle.activeColor:tabStyle.inactiveColor}};">
      {{item.content}}
    </view> 
  </view>
  <!-- 特殊图标 -->
  <image src=‘./icons/tab3.png‘ class=‘icon-tab3‘ bindtap=‘handleClickMid‘></image>
</view>

3、index.wcss(样式可自行定义,这里不做补充)

4、index.js

const config = require(‘./config.js‘)
const app = getApp()
Component({
  properties: {
    activeIndex: {
      type: Number,
      value: 1,
    },
  },
  // ios下会有问题,隐藏两遍原有tabbar
  created () {
    wx.hideTabBar({
      aniamtion: false,
      fail () {
        setTimeout(function () {
          wx.hideTabBar({ aniamtion: false })
        }, 500)
      }
    })
  },
  ready () {
    const _this = this
    // iPhone X 适配tabbar高度
    wx.getSystemInfo({
      success (res) {
        const model = res.model
        if (model.search(‘iPhone X‘) != -1 || 
       model.search(‘iPhone 11‘) != -1 ||
       model.search(‘unknown
<iPhone12,1>‘) != -1)
     { _this.setData({ tabHeight: 150 }) } } }) wx.hideTabBar({ aniamtion: false, fail () { setTimeout(function () { wx.hideTabBar({ aniamtion: false }) }, 500) } }) }, data: config, methods: { handleClick (e) { const idx = e.currentTarget.dataset.index if (idx == this.data.activeIndex) return; const url = this.data.tabs[idx].url wx.switchTab({ url }) } } })

注:调用 wx.hideTabBar 方法将定义过的 tabBar 隐藏

5、index.json

{
  "component": true
}

6、config.js

module.exports = {
  tabHeight: 100,
  tabStyle: {
    activeColor: ‘#333‘,
    inactiveColor: ‘#ccc‘,
  },

  tabs: [
    {
      "content": "tab1",
      "activeImg": "./icons/tab1-on.png",
      "inactiveImg": "./icons/tab1-off.png",
      "url": "/pages/page1/index"
    },
    {
      "content": "tab2",
      "activeImg": "./icons/tab2-on.png",
      "inactiveImg": "./icons/tab2-off.png",
      "url": "/pages/page2/index"
    },
    {
      "content": "tab3",
      "activeImg": "./icons/tab3.png",
      "inactiveImg": "./icons/tab3.png",
      "url": "/pages/page3/index"
    },
    {
      "content": "tab4",
      "activeImg": "./icons/tab4-on.png",
      "inactiveImg": "./icons/tab4-off.png",
      "url": "/pages/page4/index"
    },
    {
      "content": "tab5",
      "activeImg": "./icons/tab5-on.png",
      "inactiveImg": "./icons/tab5-off.png",
      "url": "/pages/page5/index"
    },
  ],
}

三、页面引入组件

分别在 tab1、tab2、tab4 和 tab5 的wxml页面底部引入组件

<um-tabbar active-index="0"></um-tabbar>

 

 

微信小程序——自定义菜单tabbar

上一篇:小程序中webview在百度地图和vant搜索框页面顶出


下一篇:微信小程序 授权登录详解(附完整源码)