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

2023-10-30 10:29:15

一、全局配置

在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

码农公寓

一、全局配置

二、自定义组价

三、页面引入组件

相关文章