前言

微信小程序

代码

支付宝小程序

首页配置文件

[二级菜单页面配置](#二级菜单页面配置)

总结

不同

相同

前言

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

微信小程序

代码

pages.json文件中配置

重点： "navigationStyle": "custom", // 导航栏样式

javascript 复制代码

{
      "path": "pages/home/home",
      "style": {
        "navigationBarTitleText": "首页",
        "navigationStyle": "custom",
        // 开始下拉刷新
        "enablePullDownRefresh": true,
        // 上拉触底的距离
        "onReachBottomDistance": 150
      }
    },

首页 vue文件

template

javascript 复制代码

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

script

javascript 复制代码

data中定义
   
     topHeight: 20,

onLoad(){

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

}

备注：

height：是胶囊的高度

支付宝小程序

首页配置文件

pages.json文件

重要："transparentTitle": "always", // 导航栏透明设置

javascript 复制代码

{
      "path": "pages/home/home",
      "style": {
        "transparentTitle": "always",
        // "navigationBarTitleText": "首页",
        // "navigationStyle": "custom",
        // 开始下拉刷新
        "enablePullDownRefresh": true,
        // 上拉触底的距离
        "onReachBottomDistance": 150
      }
    },

首页 vue 页面

template

javascript 复制代码

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

script

javascript 复制代码

data中 定义

topHeight: 20,
titleHeight: 0,


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

样式

二级菜单页面配置

只需要加

"navigationBarTitleText": "站点详情"

javascript 复制代码

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

        },

详情页样式详情页 vue文件不需要获取设备的宽高属性

总结

不同

微信小程序在 pages.json 中配置导航栏样式

"navigationStyle": "custom"

而支付宝小程序在pages.json 中配置导航栏透明度

"transparentTitle": "always",

配置导航栏标题文字内容

"navigationBarTitleText": "站点详情",

微信小程序在配置导航栏样式后在配置这个属性，则在页面不会显示标题文字内容

而支付宝小程序配置此属性则在页面上显示标题文字内容（若在二级页面时也会出现返回上一级的箭头）

相同

获取导航栏顶部到胶囊顶部以及胶囊高度的方法都是一样的

uniapp 之 微信小程序、支付宝小程序 对于自定义导航栏的不同

前言

微信小程序

代码

支付宝小程序

首页配置文件

二级菜单页面 配置

总结

不同

相同

uniapp 之微信小程序、支付宝小程序对于自定义导航栏的不同

二级菜单页面配置