微信小程序、自定義頭部樣式

1、單個頁面

.wxml文件

<view>
<!-- 自定義導航 -->
 <view class='nav bg-white' style='height:{{navHeight}}px'>
    <view class='nav-title'>
     <view class="nav-position">位置</view>
      <view class="INinputheader">
        <icon class="INsearchicon" type="search" size="12"/>
        <input class="weui-input" placeholder="請輸入搜索內容"/>
      </view>
    </view>
</view>

.wxss文件

.nav{
  width: 100%;
  overflow: hidden;
  position: relative;
  top: 0;
  left: 0;
  z-index: 10;
}
.nav-title{
  width: 100%;
  height: 45px;
  line-height: 45px;
  text-align: center;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 10;
  font-family:PingFang-SC-Medium;
  font-size:36rpx;
  letter-spacing:2px;
}

.nav-title .nav-position{
  float: left;
  color: #FFFFFF;
  margin-left: 12px;
  font-size: 14px;
}
.nav .back{
  width: 22px;
  height: 22px;
  position: absolute;
  bottom: 0;
  left: 0;
  padding: 10px 15px;
}
.bg-white{
  background-color:#169bd5;
}
.bg-gray{
  background-color: #f7f7f7;
}
.overflow{
  overflow: auto;
}
.hidden{
  overflow: hidden;
}
.INinputheader{
  width:40%;
  height:30px;
  background:rgba(255,255,255,1);
  border-radius:30px;
  font-size: 14px;
  margin-top:7px;
  position: relative; 
  float: left;
  margin-left:12px;
}
.INsearchicon{
  position: absolute;
  left:12px;
}
.weui-input{
  height: 30px;
  line-height: 30px;
  text-align: left; 
  padding-left: 30px;
  letter-spacing:0px;
}
.INtab{
  text-align: left;
  margin-left: 12px;
  color: #fff;
}

.json文件

{
  "usingComponents": {},
   "navigationStyle":"custom",//
   "navigationBarTextStyle":"white"
}

.js文件

const app = getApp()
Page({
 data: {
 navHeight: 0
 },
 onLoad: function (options) {
 wx.getSystemInfo({
  success: res => {
    //導航高度
    console.log('頭部導航',res)
    this.setData({
      navHeight: res.statusBarHeight + 46
      })
  }, fail(err) {
    console.log(err);
  }
})
 }
})

 

2、整體頁面

app.json文件

"window": {
    "backgroundTextStyle": "light",//非自定義字體位置
    "navigationBarBackgroundColor": "#fff",//非自定義背景顏色
    "navigationBarTitleText": "項目名",//標題
    "navigationBarTextStyle": "white",//右上交三個點和關閉按鈕顏色只能配置黑白
    "navigationStyle": "custom"//自定義需要配置的內容
  },

app.js文件

App({
  onLaunch: function () {
    // 獲取頂部欄信息
    wx.getSystemInfo({
      success: res => {
        //導航高度
        this.globalData.navHeight = res.statusBarHeight + 46;
      }, fail(err) {
        console.log(err);
      }
    })
  },
  globalData: {
    userInfo: null,
    navHeight: 0
  }
})

對應頁面的 .wxml

<view>
<!-- 自定義導航 -->
 <view class='nav bg-white' style='height:{{navH}}px'>
    <view class='nav-title'>
     <view class="nav-position">位置</view>
      <view class="INinputheader">
        <icon class="INsearchicon" type="search" size="12"/>
        <input class="weui-input" placeholder="請輸入搜索內容"/>
      </view>
    </view>
</view>

對應頁面的.js

const App = getApp();//設立頂部欄高度
Page({
    data:{
          navH:0
      },
    onLoad: function (options) {
      //自定義頭部方法
       this.setData({
           navH: App.globalData.navHeight
      });
  }
})