/* wxml */
<view class="custom-bar" style="margin-top: {{config.top}}px; height: {{config.height}}px;">
<view class="nav-title">
<slot name="nav-title"></slot>
</view>
<view class="title">
<slot name="title"></slot>
</view>
</view>
/* wxss */
.custom-bar {
height: 60rpx;
padding-left: 7px; /* 固定為 7 */
display: flex;
align-items: center;
box-sizing: border-box;
position: relative;
}
.custom-bar .nav-title {
font-size: 24rpx;
}
.custom-bar .title {
text-align: center;
position: absolute;
left: 50%;
transform: translateX(-50%);
}
/* js */
Component({
options: {
multipleSlots: true
},
/**
* 組件的屬性列表
*/
properties: {
},
/**
* 組件的初始數(shù)據(jù)
*/
data: {
config: {}
},
ready() {
const config = wx.getMenuButtonBoundingClientRect()
this.setData({ config })
},
/**
* 組件的方法列表
*/
methods: {
}
})
