更新记录

0.1.2(2022-06-08)

  • 修复 微信小程序 separator 不显示问题

0.1.1(2022-06-02)

  • 新增 支持 uni.scss 修改颜色
查看更多

平台兼容性

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

breadcrumb 面包屑导航

组件名:uni-breadcrumb 代码块: ubreadcrumb

显示当前页面的路径,快速返回之前的任意页面。

安装方式

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

如需通过npm方式使用uni-ui组件,另见文档:https://ext.dcloud.net.cn/plugin?id=55

基本用法

template 中使用组件

<uni-breadcrumb separator="/">
    <uni-breadcrumb-item v-for="(route,index) in routes" :key="index" :to="route.to">{{route.name}}</uni-breadcrumb-item>
</uni-breadcrumb>
export default {
        name: "uni-stat-breadcrumb",
        data() {
            return {
                routes: [{
                    to: '/A',
                    name: 'A页面'
                }, {
                    to: '/B',
                    name: 'B页面'
                }, {
                    to: '/C',
                    name: 'C页面'
                }]
            };
        }
    }

API

Breadcrumb Props

属性名 类型 默认值 说明
separator String 斜杠'/' 分隔符
separatorClass String 图标分隔符 class

Breadcrumb Item Props

属性名 类型 默认值 说明
to String 路由跳转页面路径
replace Boolean 在使用 to 进行路由跳转时,启用 replace 将不会向 history 添加新记录(仅 h5 支持)

组件示例

点击查看:https://hellouniapp.dcloud.net.cn/pages/extUI/breadcrumb/breadcrumb

隐私、权限声明

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

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

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

许可协议

MIT协议

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