更新记录

1.0.1（2021-04-07） 下载此版本

上传示例工程

1.0.0（2021-04-07） 下载此版本

上传插件

平台兼容性

uni-app

tm-nav-bar 导航栏组件

常用于H5页面的头部

是天马工场所有公共组件之一，组件功能预览链接，用手机浏览效果更佳

代码块： tm-nav-bar 关联组件：uni-icons

1.1 使用方式

本组件符合easycom规范，HBuilderX 2.5.5起，只需将本组件导入项目，在页面template中即可直接使用，无需在页面中import和注册components。

直接点击使用HbuilderX导入插件就行

1.2 基本用法

在 template 中使用组件

<!-- 基本用法 -->
<tm-nav-bar title="自定义标题" @clickLeft="clickLeft" />

<!-- 左右都显示文字 -->
<tm-nav-bar left-icon="arrowleft" left-text="返回" right-icon="weixin" right-text="分享"  title="自定义标题" @clickLeft="back" @clickRight="clickRight" />

<!-- 设置颜色 -->
<tm-nav-bar left-icon="arrowleft" left-text="返回" leftColor="#ffffff" right-icon="weixin" right-text="分享" rightColor="#ffffff" title="自定义标题" titleColor="#ffffff" :backgroundType="0" backgroundColor="#007AFF" @clickLeft="clickLeft" @clickRight="clickRight" />

<!-- 设置背景图片 -->
<tm-nav-bar left-icon="arrowleft" left-text="返回" leftColor="#ffffff" right-icon="weixin" right-text="分享" rightColor="#ffffff" title="自定义标题" titleColor="#ffffff" :backgroundType="1" backgroundImgUrl="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1467185356,2616406287&fm=26&gp=0.jpg" @clickLeft="clickLeft" @clickRight="clickRight" />

export default {
    methods:{
        clickRight() {
            uni.showToast({
                title: '点击右侧按钮'
            })
    },
        clickLeft() {
            uni.showToast({
                title: '点击左侧按钮'
            })
        }
    }
}

1.3 参数说明

1.4 插槽说明

开发者使用 NavBar 时，支持向 NavBar 里插入不同内容，以达到自定义的目的。

<tm-nav-bar :fixed="false" color="#333333" background-color="#FFFFFF" right-icon="scan" @clickLeft="clickLeft" @clickRight="clickRight">
    <block slot="left">
        <view class="city">
            <view><text class="uni-nav-bar-text">成都</text></view>
            <uni-icons type="arrowdown" color="#333333" size="22" />
        </view>
    </block>
    <view class="input-view">
        <uni-icons class="input-uni-icon" type="search" size="22" color="#666666" />
        <input confirm-type="search" class="nav-bar-input" type="text" placeholder="输入搜索关键词" @confirm="confirm">
    </view>
</tm-nav-bar>