更新记录
0.1.2(2022-06-08) 下载此版本
- 修复 微信小程序 separator 不显示问题
0.1.1(2022-06-02) 下载此版本
- 新增 支持 uni.scss 修改颜色
0.1.0(2022-04-22) 下载此版本
- 初始化
平台兼容性
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