小程序系列（一）——自定義頂部導航

具有基礎

vue框架：vue官方文檔

mpvue框架：mpvue官方文檔

全局配置

• 找到全局的app.json文件，在配置中添加以下內容：

"navigationStyle": "custom"複製代碼

"window": {
   "backgroundTextStyle": "light",
   "navigationBarBackgroundColor": "#fff",
   "navigationBarTitleText": "WeChat",
   "navigationBarTextStyle": "black",
   "navigationStyle": "custom" // 這個配置
}複製代碼

組件思惟

• 使用mpvue開發小程序，src目錄下默認會生成一個components文件夾；
• 因爲自定義組件全部webview頁面都要使用，因此把它歸類爲公共組件；
• 能夠在components文件夾下新建一個common文件夾，專門放置公共組件，以下：

├── src                    源碼目錄  
│  ├── main.js             入口js文件
│  ├── app.json            全局配置
│  ├── components          組件目錄
│  │  └── common           公共組件
          └── topBar.vue   頂部自定義導航複製代碼

組件內容

• 因爲不一樣設備statusBarHeight值可能有差別，自定義組件的高度取決於statusBarHeight值；
• 找到全局App.vue文件，在這裏面執行小程序的onLaunch生命週期（監聽小程序初始化）；
• 具體獲取方法以下：

const that = this
let systemInfo = wx.getSystemInfoSync()
that.setBarHeight(systemInfo.statusBarHeight)複製代碼

• 經過vuex存儲statusBarHeight值，不清楚vuex如何在小程序中使用的可參考mpvue如何使用vuex；
• .vue文件的html相關結構以下：

<template>
  <div class="top-bar">
    <div class="bar" :style="'height:'+(systemInfo.barHeight+46)+'px;'">
      <span class="title">{{title}}</span>
      <button v-if="way && way==='/pages/mine/main'" open-type="getUserInfo" @getuserinfo="toMine">
        <image class="icon" :src="icon" />
      </button>
      <image v-else-if="way && way!=='/pages/mine/main'" class="icon-back" :src="icon" @tap="toPage(way)" />
      <span v-else></span>
    </div>
    <p class="place-holder" :style="'padding-top:'+(systemInfo.barHeight+6)+'px;'"></p>
  </div>
</template>複製代碼

• 結構分析以下，可看作兩部分，一部分是fixed定位在頂部的class="bar"的div;另外一部分是class="place-holder"的p；
• 之因此要放一個p標籤，是由於不用每次引入topBar.vue時都要考慮class="bar"的div都會遮擋內容區的問題；
• 所以將p標籤height:80rpx;加上padding-top的6px;正好等於class="bar"的div的高度；

​

​

• 因爲項目中左邊放置的是進入我的中心的功能，因此左邊頭像必須使用button來出發獲取用戶信息的受權；
• 同時須要考慮到左邊不是頭像的狀況，這時就能夠用到vue的props屬性，具體props值，看下面代碼，默認是給向左的箭頭，表示返回上一頁；

props: {
  title: {
    type: String,
    required: true
  },
  icon: {
    type: String,
    default: require('@static/icon/icon_back.png')
  },
  way: {
    type: String,
    default: null
  }
}複製代碼

• 若是way啥也不傳則左側不顯示任何icon；
• 若是way傳入的是進入我的中心的路由，則走button結構上面的事件；
• 若是way傳入的是‘back’，則顯示返回的向左箭頭。

問題總結

• 該公共topBar.vue組件對ipad不能有效適配；
• fixed定位在安卓手機上下拉刷新時，結構會跟着下拉，例如本文的自定義導航，下拉刷新的時候導航會跟着下拉而後再fixed到頂部（開發者工具上沒問題，真機有問題）；