更新记录

1.1.0（2023-06-27） 下载此版本

• 增加左右两侧图标选项，为 leftIcon 和 rightIcon
• 增加左右两侧图标单击事件，为 @leftClick 和 @rightClick

1.0.0（2023-06-05） 下载此版本

• 完成基础样式的建立，并支持颜色、文字大小等样式的自定义
• 组件允许修改与顶部之间的距离 offsetTop

平台兼容性

仿 flutter 样式的 应用顶部程序栏

在使用该组件之前，请将 uni-app 提供的 原生导航栏 进行隐藏；在 pages.json 中修改

{
    "pages": [{
        "style": {
            "navigationStyle": "custom"
        }
    }],
    "globalStyle": {

        "app-plus": {
            "titleNView": false //禁用原生导航栏 
        }
    }
}

1.1.0 支持插入图标，来自阿里图标库，请自行查阅可插入的图标文档 图标文档

基本使用

因为顶部应用程序栏被迫使用了 fixed定位， 因此内容区域请自行填充顶部被覆盖的 210rpx区域

<template>
   <view>
    <smm-appbar text='首页' leftIcon='home'></smm-appbar>
    <view class="content">
        Hello word
    </view>
  </view>
</template>
<style lang="scss">
    .content {
        margin-top: 210rpx;
        background-color: #fff;
    }
</style>

参数传递

solt 插槽

使用 <template #slot:name> 进行对应操作

事件向外