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

这篇具有很好参考价值的文章主要介绍了uniapp 之微信小程序、支付宝小程序对于自定义导航栏的不同。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

前言

微信小程序

代码

支付宝小程序

首页配置文件

二级菜单页面配置

总结

不同

相同

前言

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

微信小程序

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

代码

pages.json文件中配置

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

{
      "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：是胶囊的高度

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

支付宝小程序

首页配置文件

pages.json文件

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

{
      "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 // 胶囊的高

样式

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

二级菜单页面配置

只需要加

"navigationBarTitleText": "站点详情"

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

        },

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

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