<!-- 背景图 -->
<!-- <image class="img-s" src="{
{base_img_url}}home/setting_img.png" mode="widthFix"></image> -->
<view class="custom-heads" style="height:{
{capsule.navHeight-40}}px;">
<view style="height:{
{capsule.navObj}}px;margin-top:{
{capsule.navTop}}px;padding-right:{
{capsule.navObjWid+5}}px;" class="flex-box">
<view class="header-s">
<view class="header-ss" bindtap="gobackBtn">
<image class="head-img" src="https://campaigncdn.herdsric.com/a2/home/go_back.png" mode="widthFix"></image>
</view>
<view class="input">
<view class="input-txts">活动规则</view>
</view>
</view>
</view>
</view>
js
// 胶囊适配
capsule: {
navHeight: '', //导航栏高度
navTop: '', //导航栏距顶部距离
navObj: '', //胶囊的高度
navObjWid: '', //胶囊宽度+距右距离
navbarHeight: 0,
navbarTop: 0,
},
// 胶囊适配
initCapsule() {
let menuButtonObject = wx.getMenuButtonBoundingClientRect();
this.globalData.capsule.navbarTop = menuButtonObject.top;
this.globalData.capsule.navbarHeight = menuButtonObject.height;
wx.getSystemInfo({
success: res => {
//导航高度
let statusBarHeight = res.statusBarHeight,
navTop = menuButtonObject.top,
navObjWid = res.windowWidth - menuButtonObject.right + menuButtonObject.width, // 胶囊按钮与右侧的距离 = windowWidth - right+胶囊宽度
navHeight = statusBarHeight + menuButtonObject.height + (menuButtonObject.top - statusBarHeight) * 2;
this.globalData.capsule.navTop = navTop //胶囊距离顶部距离
this.globalData.capsule.navHeight = navHeight //导航栏总体高度
this.globalData.capsule.navObjWid = navObjWid //胶囊宽度(包括右边距离)
this.globalData.capsule.navObj = menuButtonObject.height //胶囊高度
// console.log(res, this.globalData.capsule.navTop, '胶囊适配');
},
fail(err) {
console.log(err);
}
})
},