微信小程序获取tabbar的高度_微信小程序自定义tabbar
小程序在基礎庫2.5.0開始支持的了自定義的tabbar，那么可以自定義更美觀、更實用、更突顯程序主要功能的tabbar了
我的項目是因為產品對iPhone下的tabbar沒有垂直居中不滿意，沒辦法只有改咯。
首先需要在app.json中將tabbar改成自定義的
"custom": true //自定義屬性
然后在根目錄下創建custom-tab-bar/index組件頁面
貼代碼了：
wxml
首頁
限購
團購
我的
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: {
},
/**
* 組件的初始數據
*/
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],
})
}
}
})
最后在引用的頁面用getTabBar()獲取自定義tabbar組件的實例控制是否選中
/**
* 生命周期函數--監聽頁面顯示
*/
onShow: function () {
this.getTabBar().setData({
_tabbat: 0
})
},
總結
以上是生活随笔為你收集整理的微信小程序获取tabbar的高度_微信小程序自定义tabbar的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： python语音分割_用7行Python
- 下一篇： threejs路径