赞
踩
1.首先在.json文件中进行配置;
- {
- "navigationBarTitleText": "导航栏自定义~",
- "navigationStyle":"custom",
- "usingComponents": {
-
- }
- }
2.页面.wxml
- <view class="custom_head" style="height:{{globalData.navHeight+5}}px;">
- <view class="flex-row j_b" style="height:{{globalData.navObj}}px;padding-top:{{globalData.navTop+5}}px;padding-right:{{globalData.navObjWid+5}}px;margin-left: 15px; ">
- <image src="/assets/img/home/dingwei.png" mode="heightFix" style="width: 38rpx;height: 38rpx;vertical-align:top;" />
- <text class="locationFont" >西北大学第一医院</text>
- </view>
- </view>
3.对应的js
- const app = getApp()
- Page({
- data{
- //取到自己定义的高度
- customheight: app.globalData.customheight,
- globalData: {
- navHeight:0, //导航栏总体高度
- navTop:0,//胶囊距离顶部距离
- navObj:0,//胶囊高度
- navObjWid:0 //胶囊宽度(包括右边距离)
- },
-
- }
- )}
-
- onLoad(){
-
- let menuButtonObject = wx.getMenuButtonBoundingClientRect();
- wx.getSystemInfo({
- success: res => {
- //导航高度
- let statusBarHeight = res.statusBarHeight,
- navTop = menuButtonObject.top,
- // 胶囊按钮与右侧的距离 = windowWidth - right+胶囊宽度
- navObjWid = res.windowWidth - menuButtonObject.right + menuButtonObject.width,
- navHeight = statusBarHeight + menuButtonObject.height + (menuButtonObject.top - statusBarHeight) * 2;
- Object.assign(app.globalData,this.data.globalData)
- this.setData({
- 'globalData.navHeight': navHeight,
- 'globalData.navTop':navTop, //胶囊距离顶部距离
- 'globalData.navObj':menuButtonObject.height,//胶囊高度
- 'globalData.navObjWid':navObjWid //胶囊宽度(包括右边距离)
- });
- }
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。