微信小程序获取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页面底部引入组件