微信小程序获取tabbar的高度_微信小程序——自定义菜单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” }

]

}

注：

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

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

二、自定义组价

components/um-tabbar目录下

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

2、index.wxml

{{item.content}}

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’) != -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

})

}

}

})

注：

a、调用 wx.hideTabBar 方法将定义过的 tabBar 隐藏

b、考虑 iphoneX 适配：调用 wx.getSystemInfo 方法获取设备信息，根据手机型号 model字段判断机型，进而设置 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页面底部引入组件