目錄

前言?

微信小程序

代碼?

支付寶小程序

首頁配置文件

二級菜單頁面? 配置

總結(jié)?

不同

相同

前言?

?小程序都是 uni-app 寫的 不是原生

微信小程序

代碼?

pages.json文件中配置

重點：?"navigationStyle": "custom",??// 導(dǎo)航欄樣式

{
      "path": "pages/home/home",
      "style": {
        "navigationBarTitleText": "首頁",
        "navigationStyle": "custom",
        // 開始下拉刷新
        "enablePullDownRefresh": true,
        // 上拉觸底的距離
        "onReachBottomDistance": 150
      }
    },

?首頁 vue文件

template

 <view class=" " :style="{'height':topHeight+'px'}"></view>

?script

data中定義
   
     topHeight: 20,

onLoad(){

   const {
        height,
        top
      } = uni.getMenuButtonBoundingClientRect();
      this.topHeight = height + top

}

?備注：

?height：是膠囊的高度

支付寶小程序

首頁配置文件

pages.json文件

重要："transparentTitle": "always",? // 導(dǎo)航欄透明設(shè)置

{
      "path": "pages/home/home",
      "style": {
        "transparentTitle": "always",
        // "navigationBarTitleText": "首頁",
        // "navigationStyle": "custom",
        // 開始下拉刷新
        "enablePullDownRefresh": true,
        // 上拉觸底的距離
        "onReachBottomDistance": 150
      }
    },

?首頁? ?vue 頁面

template

 <view :style="{'height':topHeight+'px'}" />
 <view :style="{'height':titleHeight+'px'}" style="text-align: center;">你好</view>

script

data中 定義

topHeight: 20,
titleHeight: 0,


onLoad 中 
 const {
        height,
        top
      } = uni.getMenuButtonBoundingClientRect();
      this.topHeight = top // 頂部到膠囊的高度 54
      this.titleHeight = height // 膠囊的高

樣式

?

二級菜單頁面? 配置

只需要加?

?"navigationBarTitleText": "站點詳情"

{
      "root": "subpkg",
      "pages": [{
          "path": "service/service",
          "style": {
            "enablePullDownRefresh": true,
            "navigationBarTitleText": "站點詳情",
            "transparentTitle": "always",
            "onReachBottomDistance": 150
          }

        },

詳情頁樣式? ?詳情頁 vue文件 不需要獲取設(shè)備的寬高屬性

總結(jié)?

不同

1. 微信小程序在 pages.json 中配置導(dǎo)航欄樣式?

"navigationStyle": "custom"

而 支付寶小程序 在pages.json 中配置導(dǎo)航欄透明度

"transparentTitle": "always",

2. 配置導(dǎo)航欄標題文字內(nèi)容??

"navigationBarTitleText": "站點詳情",

微信小程序 在配置導(dǎo)航欄樣式后在配置 這個屬性，則在頁面不會顯示 標題文字內(nèi)容

而 支付寶小程序配置 此屬性 則在頁面上顯示標題文字內(nèi)容 （若在二級頁面時 也會出現(xiàn)返回上一級的箭頭）

相同

獲取導(dǎo)航欄頂部到膠囊頂部 以及 膠囊高度的方法都是一樣的文章來源地址http://www.zghlxwxcb.cn/news/detail-607439.html

到了這里，關(guān)于uniapp 之 微信小程序、支付寶小程序 對于自定義導(dǎo)航欄的不同的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！