更新记录

1.0.3（2025-06-12） 下载此版本

新增 absolute 属性控制左右图标是否是绝对定位

1.0.2（2025-06-09） 下载此版本

1.修改微信小程序中getSystemInfoSync提示被弃用的问题 2.添加安全区背景颜色同整体一致

1.0.1（2025-03-11） 下载此版本

新增返回页面成功和失败事件

平台兼容性

uni-app

其他

navBar 自定义导航栏

组件名: xt-nav-bar

安装方式

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

基本用法

<template>
    <view class="xt">
        <xt-nav-bar fixed placeholder title="固定顶部" border></xt-nav-bar>
        <xt-nav-bar title="基础使用" border></xt-nav-bar>
        <xt-nav-bar border>
            <template #left>
                <view style="padding-left: 15rpx">
                    <xt-icon name="xt-icon-shouye1" size="20" color="#333"></xt-icon>
                </view>
            </template>
            <template #title>自定义插槽</template>
            <template #right>
                <view style="padding-right: 15rpx">
                    <xt-icon name="xt-icon-aixin1" size="20" color="#333"></xt-icon>
                </view>
            </template>
        </xt-nav-bar>
        <xt-nav-bar title="自定义颜色" bgColor="rgba(0,0,0,0.2)"></xt-nav-bar>
        <xt-nav-bar title="标题超出最大宽度显示省略号" border></xt-nav-bar>
    </view>
</template>

<script>
export default {
    data() {
        return {};
    },
    methods: {}
};
</script>

<style lang="scss">
.xt {
    display: flex;
    flex-direction: column;
    gap: 20rpx;
}
</style>

API

Event