⼩程序⾃定义导航栏,计算胶囊位置
效果图js导航栏下拉菜单
wxml
<view class="nav-bar" >
<view class="nav-bar-box"></view>
<view ></view> </view>
wxss
.nav-bar{
width: 100%;
height: 150rpx;
background: red;
display: flex;
}
.nav-bar-box{
flex: 1;
}
js
data:{
capsuleButton:{},// 右上⾓胶囊按钮的属性
phoneInfo:{},// ⼿机信息
},
onLoad:function(options){
this.setData({
phoneInfo: wx.getSystemInfoSync(),
MenuButtonBoundingClientRect()
})
},
}