组件库文档 tmui.design
底部导航栏 Tabbar
内部只能放置,tm-tabbar-item。
🌶️ 底部导航栏 Tabbar 示例
查看模拟效果+
示例模板
vue
<template>
<tm-app>
<tm-sheet>
<tm-text label="点击中间+按钮可以体验异步加载动态效果."></tm-text>
</tm-sheet>
<tm-tabbar :autoSelect="false" v-model:active="acc">
<tm-tabbar-item @click="acc=0" activeColor="orange" count="HOT" open-type='reLaunch' text="首页" icon='tmicon-collection-fill'></tm-tabbar-item>
<tm-tabbar-item @click="acc=1" activeColor="orange" text="表单" icon='tmicon-cog-fill'></tm-tabbar-item>
<tm-tabbar-item @click="acc=2" :shadow="2" :beforeClick="laodingfun" :data="'中间项'" btn-top fontColor="white" activeColor="white" linear="top" linearDeep="accent" color="yellow" icon="tmicon-plus"></tm-tabbar-item>
<tm-tabbar-item @click="acc=3" activeColor="orange" url='/pages/fankui/index' text="反馈分类" unicon="tmicon-like" icon="tmicon-heart-fill"></tm-tabbar-item>
<tm-tabbar-item @click="acc=4" activeColor="orange" :count="8" url='/pages/chart/index' active text="图表中心" unicon="tmicon-account" icon="tmicon-userplus-fill"></tm-tabbar-item>
</tm-tabbar>
</tm-app>
</template>
<script lang="ts" setup>
import { ref, getCurrentInstance } from "vue"
import { onShow, onLoad } from "@dcloudio/uni-app";
import tmApp from "@/tmui/components/tm-app/tm-app.vue"
import tmSheet from "@/tmui/components/tm-sheet/tm-sheet.vue"
import tmText from "@/tmui/components/tm-text/tm-text.vue"
import tmTabbar from "@/tmui/components/tm-tabbar/tm-tabbar.vue"
import tmTabbarItem from "@/tmui/components/tm-tabbar-item/tm-tabbar-item.vue"
const acc = ref(1)
function laodingfun(val){
return new Promise(res=>{
setTimeout(function() {
console.log("选中了:",val)
res(true)
}, 2000);
})
}
</script>
🌶️ 兼容性
APP-VUE | APP-NVUE | 小程序 | WEB/H5 | VUE3/TS |
---|---|---|---|---|
✔️ | ✔️ | ✔️ | ✔️ | ✔️ |
🌱 参数
本组件含有公共属性 公共属性
参数名 | 类型 | 默认值 | 描述 |
---|---|---|---|
transprent | [Boolean, String] | false | 是否透明 |
color | [String] | white | 背景颜色 |
text | [Boolean] | false | 是否浅色背景 |
round | [Number, String] | 0 | 圆角0-25,单位rpx |
shadow | [Number] | 0 | 投影, 0-25 |
width | [Number] | 0 | 宽度,单位rpx, 如果为0取当前窗口宽度 |
bottom | [Number] | 0 | 底部偏移,单位rpx |
showSafe | [Boolean] | false | 是否显示安全区域 |
autoSelectv3.0.77+ | [Boolean] | true | 是否自动通过点击项目来选中项目,默认:true自动。如果设置为false时,则可以通过下方的active双向绑定来手动切换选中项 |
activev3.0.77+ | Number | -1 | 当前活动荐的索引,从0开始,可以使用v-model:active来双向绑定切换选中项,必须autoSelect设置为false才起效 |
zIndex | [Number] | 200 | 层级,注意:nvue是没有效果的,需要放到页面最后才能是页面的最顶部。 |
🌹 事件
方法名 | 参数 | 返回值 | 描述 |
---|---|---|---|
changev3.0.77+ | - | active | 通过手动切换选中值时触发本事件。 |
🌽 slot插槽
默认default,注意:内部只能放置,tm-tabbar-item
🥗 ref方法
方法名 | 参数 | 返回值 | 描述 |
---|---|---|---|
tmTabbarId | |||
setNowurl | |||
pushKey | |||
delKey |
子组件 tm-tabbar-item
🌱 参数
本组件含有公共属性 公共属性
参数名 | 类型 | 默认值 | 描述 |
---|---|---|---|
blur | [Boolean] | false | 是否开启磨砂效果背景 |
followTheme | [Boolean] | true | 是否跟随主题,可选值:false, true |
transprent | Boolean | true | 是否透明 |
color | String | white | 背景主题色 |
fontColor | String | grey-darken-1 | 文字主题色 |
activeColor | String | primary | 激活后的主题色 |
active | Boolean | false | 当前是否是活动项,注意:它不是动态的,只是默认选中的项,它只能通过点击本组件项目来切换 |
btnTop | Boolean | false | 是否开启向上凸起的按钮 |
text | String | '' | 展示文字 |
icon | String | '' | 选中图标 |
unicon | String | '' | 未选中时的图标,如果不填写默认使用相同的图标 |
textSize | Number | 20 | 字体大小 |
iconSize | Number | 38 | icon尺寸 |
dot | [Boolean, String] | false | 是否显示圆点,可选值:false, true |
dotColor | [String] | red | 圆点颜色 |
dotIcon | [Boolean, String] | false | 圆点使用icon图标 |
count | [Number, String] | 0 | count为数字时,显示数字角标,如果为string是显示文本角标 |
maxCount | [Number, String] | 99 | 最大数值 |
url | [String] | "" | 链接地址 |
openType | [String] | navigate | 链接打开方式同官方 |
beforeClick | [Function, Boolean] | (data)=>false | 参数:data,为下方自行绑定到属性data上的数据。打开链接之前执行的勾子函数,返回fase阻止打开。也可以返回new Promise |
load | [Boolean, String] | false | 是否开启异步加载动效,可选值:false, true |
datav3.0.63+ | [Object,Number, String] | undefined | 自义绑定数据到项目上,beforeClick执行时,上下文参数 |
disabled | Boolean | true | 是否禁用 |
🌹 事件
事件名 | 参数 | 返回数据 | 描述 |
---|---|---|---|
click | 无 | 无 | 项目被点击时触发 |
beforeClick | 无 | 无 | 点击切换之前执行,如果返回false或者Promise<false> 时,将阻止链接的切换。如果没有提供url链接地地址将只作为切换使用 |
🥗 ref方法
无