更新记录

1.0.3（2022-05-05）

优化app端显示效果

1.0.2（2022-04-21）

修复微信小程序和app真机上背景图片无法显示的问题

1.0.1（2022-04-20）

新增README.md

平台兼容性

bluestar-navigation-bar

自定义导航栏

代码演示

<template>
  <bluestar-navigation-bar
    title="体检费"
    color="#ffffff"
    size="32"
    backgroundHeight="120px"
    backgroundColor="linear-gradient(360deg, #91c7fc 0%, #1e8af3 100%)"
    backgroundImage="/static/payment/bsfbg@2x.png"
    @init="init"
  >
    <template #left>
      <uni-icons type="back" size="24" color="#ffffff" @click="back"></uni-icons>
    </template>
  </bluestar-navigation-bar>
</template>

<script setup lang="ts">
  //获取状态栏和导航栏的高度
  const init = (e: any) => {
    console.log(e.statusBarHeight) //状态栏高度
    console.log(e.navbarHeight) //导航栏高度
  }
</script>

API

Slots

Props

Events

说明

自定义导航栏需要将原生导航栏隐藏，pages.json 配置如下

"pages": [
    {
      "path": "pages/index/index",
      "style": {
        "navigationStyle": "custom",
        "enablePullDownRefresh": false,
        "mp-alipay": {
          "transparentTitle": "always",
          "titlePenetrate": "YES",
          "defaultTitle": ""
        },
        "app-plus": {
          "titleNView": false
        }
      }
    }
]

作者