微信小程序获取tabbar的高度_微信小程序自定义tabbar
小程序在基礎(chǔ)庫(kù)2.5.0開始支持的了自定義的tabbar，那么可以自定義更美觀、更實(shí)用、更突顯程序主要功能的tabbar了
我的項(xiàng)目是因?yàn)楫a(chǎn)品對(duì)iPhone下的tabbar沒(méi)有垂直居中不滿意，沒(méi)辦法只有改咯。
首先需要在app.json中將tabbar改成自定義的
"custom": true //自定義屬性
然后在根目錄下創(chuàng)建custom-tab-bar/index組件頁(yè)面
貼代碼了：
wxml
首頁(yè)
限購(gòu)
團(tuán)購(gòu)
我的
wxss
._tabbar {
width: 100%;
height: 120rpx;
display: flex;
align-items: center;
background: #fff;
font-size: 26rpx;
color: #999999;
box-shadow: 0px -7rpx 13rpx 0px rgba(193, 185, 204, 0.13);
}
._tabbar .titem {
text-align: center;
width: 25%;
}
._tabbar .titem image {
display: block;
margin: auto;
width: 48rpx;
height: 48rpx;
margin-bottom: 10rpx;
}
._tabbar .tCdk {
color: #37ADFE;
}
._iPhoneX {
height: 148rpx;
}
js iphone X系列屏幕下面的返回線比較粗所以需要適配iPhoneX
// custom-tab-bar/index.js
Component({
/**
* 組件的屬性列表
*/
properties: {
},
/**
* 組件的初始數(shù)據(jù)
*/
data: {
_tabbat: 0,
iPhoneX: false,
urls: [
'/pages/home/index/index',
'/pages/limitBuy/index',
'/pages/groupBuy/index/index',
'/pages/member/index/index',
]
},
attached() {
var self = this
wx.getSystemInfo({
success(res) {
console.log(res.model)
if (res.model.indexOf('iPhone X') >= 0) {
self.setData({
iPhoneX: true
})
}
}
})
},
/**
* 組件的方法列表
*/
methods: {
switchTap: function (e) {
var self = this
var index = e.currentTarget.dataset.index;
var urls = self.data.urls
wx.switchTab({
url: urls[index],
})
}
}
})
最后在引用的頁(yè)面用getTabBar()獲取自定義tabbar組件的實(shí)例控制是否選中
/**
* 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面顯示
*/
onShow: function () {
this.getTabBar().setData({
_tabbat: 0
})
},
總結(jié)
以上是生活随笔為你收集整理的微信小程序获取tabbar的高度_微信小程序自定义tabbar的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： python语音分割_用7行Python
- 下一篇： threejs路径