更新记录

1.0.1(2025-03-11) 下载此版本

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

1.0.0(2025-03-11) 下载此版本

发布初版


平台兼容性

Vue2 Vue3
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
app-vue × × × × ×
钉钉小程序 快手小程序 飞书小程序 京东小程序 鸿蒙元服务
× × × × ×
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari

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

属性名 类型 默认值 描述
title String - 导航栏标题
titleWidth String|Number 400rpx 标题的最大宽度,内容超出会省略号隐藏
titleStyle Object - 导航栏标题样式
height String|Number 44px 导航栏高度
fixed Boolean false 是否固定在顶部
placeholder Boolean false 固定在顶部时,是否生成一个等高元素,以防止塌陷
safeAreaInsetTop Boolean true 是否开启顶部安全区适配
safeAreaInsetRight Boolean false 是否开启微信小程序右侧胶囊适配
bgColor String #fff 导航栏背景色
leftIconColor String #0e0e0e 返回图标颜色
leftIconSize String|Number 10px 左侧返回图标的大小
autoBack Boolean false 点击左侧图标是否返回上一页
border Boolean false 是否显示底部边框
borderColor String #ecf0f1 底部边框颜色

Event

属性 类型 描述 默认值
leftClick Function 返回图标点击事件(仅在图标存在情况有效) -
leftSuccess Function 返回页面成功事件(仅在图标存在情况有效) -
leftError Function 返回页面失败事件(仅在图标存在情况有效) -

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问