开发指南
组件
- 起步
- 基础组件
- 表单组件
- 数据组件
- 反馈组件
- 布局组件
- 导航组件
- 其他组件
JS
- 开发指南
- 网络
- 工具库
模板
文章来源于网络收集而来,版权归原创者所有,如有侵权请及时联系!
Tabbar 底部导航栏
Tabbar 底部导航栏 1.4.8 优点:
此组件一般用于应用的底部导航,具有如下特点:
- 可以设置凸起的按钮,且是全端通用的
- 图标可以使用字体图标(内置图标和扩展图标)或者图片
- 可以动态切换菜单的数量以及配置
- 切换菜单之前,可以进行回调鉴权
- 可以设置角标
- 有效防止组件区域高度塌陷,无需给父元素额外的内边距或者外边距来避开导航的区域
缺点:
虽然优点很多,但是如果用此组件模拟tabbar页面的话依然是瑜不掩瑕的,因为它同样带来很多难以解决的缺点:
- 首先是性能问题,在uni-app的vue版本上,自定义tabbar让您不得不在一个webview内模拟出多个页面,这存在严重的性能问题
- 相比原生的uni-app的tabbar,自定义tabbar让你失去了路由管理的功能
- 渲染的速度比不上原生的tabbar,但是这影响不大
提示
以上的缺点,是指自定义模拟tabbar页面的情形,我们提供了一个解决方案,可以使用uni-app自带tabbar系统,保证性能的同时,又能尽情自定义tabbar导航栏,见下方实战教程
说明。
平台差异说明
App | H5 | 微信小程序 | 支付宝小程序 | 百度小程序 | 头条小程序 | QQ小程序 |
---|---|---|---|---|---|---|
√ | √ | √ | √ | √ | √ | √ |
基本使用
在使用的时候,需要注意组件的位置,要将它放在和页面包裹所有内容的元素同级的位置,否则可能会造成组件的高度塌陷,有如下几个需要注意的点:
- 通过
list
参数配置每一个item的参数 - 如果需要配置凸起的按钮,这个按钮的配置需要在
list
数组的中间位置,同时需要配置mid-button
参数为true
- 将组件放在和页面包裹所有内容的元素同级的位置
- 通过
v-model
绑定一个数值变量,用于指示当前激活项的索引
下面解释list
数组中元素参数的作用:
let list = [
{
// 非凸起按钮未激活的图标,可以是uView内置图标名或自定义扩展图标库的图标
// 或者png图标的【绝对路径】,建议尺寸为80px * 80px
// 如果是中间凸起的按钮,只能使用图片,且建议为120px * 120px的png图片
iconPath: "home",
// 激活(选中)的图标,同上
selectedIconPath: "home-fill",
// 显示的提示文字
text: '首页',
// 红色角标显示的数字,如果需要移除角标,配置此参数为0即可
count: 2,
// 如果配置此值为true,那么角标将会以红点的形式显示
isDot: true,
// 如果使用自定义扩展的图标库字体,需配置此值为true
// 自定义字体图标库教程:https://www.wenjiangs.com/doc/gkq6xg3y
customIcon: false,
// 如果是凸起按钮项,需配置此值为true
midButton: false,
// 点击某一个item时,跳转的路径,此路径必须是pagees.json中tabBar字段中定义的路径
pagePath: '', // 1.5.6新增,路径需要以"/"开头
}
]
示例代码
<template>
<view>
<view class="u-page">
<!-- 所有内容的容器 -->
</view>
<!-- 与包裹页面所有内容的元素u-page同级,且在它的下方 -->
<u-tabbar v-model="current" :list="list" :mid-button="true"></u-tabbar>
</view>
</template>
<script>
export default {
data() {
return {
list: [{
iconPath: "home",
selectedIconPath: "home-fill",
text: '首页',
count: 2,
isDot: true,
customIcon: false,
},
{
iconPath: "photo",
selectedIconPath: "photo-fill",
text: '放映厅',
customIcon: false,
},
{
iconPath: "https://cdn.uviewui.com/uview/common/min_button.png",
selectedIconPath: "https://cdn.uviewui.com/uview/common/min_button_select.png",
text: '发布',
midButton: true,
customIcon: false,
},
{
iconPath: "play-right",
selectedIconPath: "play-right-fill",
text: '直播',
customIcon: false,
},
{
iconPath: "account",
selectedIconPath: "account-fill",
text: '我的',
count: 23,
isDot: false,
customIcon: false,
},
],
current: 0
}
},
}
</script>
外观配置
可以通过以下参数,进行组件的整体外观配置
height
配置导航栏高度,建议使用默认值即可,默认为50px
,与uni-app自带系统导航栏高度一致bg-color
组件的背景颜色active-color
与inactive-color
配置提示文字和图标的颜色(如果是字体图标的话),可以搭配bg-color
达到自定义导航栏主题的效果
切换前的回调
在点击切换之前,如果配置了before-switch
参数并绑定的是一个方法的话,将会抛出点击项的索引,并执行此方法。
此回调可以返回一个promise
、true
,或者false
,下面分别阐述三者的处理情况:
false
——如果返回false
,将不会切换tab
项true
——如果返回true
,将会切换tab
项promise
——如果返回的是一个promise
,如果进入then
回调,就会和返回true
的情况一样,如果进入catch
回调,就会和返回false
的情况一样
下面举例说明:
由于篇幅问题,以下示例可不直接运行,仅作举例作用。
1. 普通返回
<template>
<u-tabbar :before-switch="beforeSwitch"></u-tabbar>
</template>
<script>
export default {
methods: {
beforeSwitch(index) {
// 只能切换偶数项
if(index % 2 == 0) return true;
else return false;
}
}
}
</script>
2. 请求之后再返回
<template>
<u-tabbar :before-switch="beforeSwitch"></u-tabbar>
</template>
<script>
export default {
methods: {
async beforeSwitch(index) {
// await等待一个请求,请求回来后再返回true,再进行切换
let data = await this.$u.post('url');
return true; // 或者根据逻辑返回false
}
}
}
</script>
3. 返回一个Promise
<template>
<u-tabbar :before-switch="beforeSwitch"></u-tabbar>
</template>
<script>
export default {
methods: {
beforeSwitch(index) {
// 返回一个promise
return new Promise((resolve, reject) => {
this.$u.post('url').then(res => {
// resolve()之后,将会进入promise的组件内部的then回调,相当于返回true
resolve();
}).catch(err => {
// reject()之后,将会进入promise的组件内部的catch回调,相当于返回false
reject();
})
})
}
}
}
</script>
边框
组件默认带了顶部边框,如果有配置中部凸起按钮的话,此按钮同时也会有外层边框,如果不需要,配置border-top
为false
即可。
实战教程 1.5.6
自定义tabbar场景,我们不建议在一个页面内通过几个组件,用v-if
切换去模拟各个页面,而应该使用uni-app自带的tabbar系统,同时隐藏原生的tabbar, 再引入自定导航栏,这样可以保证原有性能,同时又能自定义tabbar,思路如下:
- 在pages.json中正常定义tabbar逻辑和字段,只需配置
tabBar
字段list
中的pagePath
(需以"/"开头)属性即可 - 在各个tabbar页面引入
u-tabbar
组件,组件会默认自动通过uni.hideTabBar()
隐藏系统tabbar - 通过
vuex
引用同一份tabbar组件的list
参数,这样可以做到修改某一个页面的u-tabbar
数据,其他页面的u-tabbar
也能同步更新 - 组件内部会自动处理各种跳转的逻辑,同时需要注意以下两点:
- 要在
list
参数中配置pagePath
路径,此路径为pages.json
中定义的tabbar字段的路径 - 此种方式,无需通过
v-model
绑定活动项,内部会自动进行判断和跳转
我们为此做了一个演示demo
,您可以在下载页找到对应的资源,下载运行即可,点此跳转下载页
API
Table Props
参数 | 说明 | 类型 | 默认值 | 可选值 |
---|---|---|---|---|
list | 各项的配置参数,见顶部说明,数组形式 | Array | - | - |
show | 是否显示组件 | Boolean | true | false |
v-model | 双向绑定的激活项的索引值 | String | Number | 0 | - |
bg-color | 组件的背景颜色 | String | #ffffff | - |
height | 高度,单位任意,数值则为rpx单位,不建议修改 | String | Number | 50px | - |
icon-size | 非中部凸起图标的大小,单位任意,数值则为rpx单位 | String | Number | 40 | - |
mid-button-size | 凸起的图标的大小,单位任意,数值则为rpx单位 | String | Number | 90 | - |
active-color | 文字和字体图标激活时的颜色 | String | #303133 | - |
inactive-color | 文字和字体图标未激活时的颜色 | String | #606266 | - |
mid-button | 是否需要中部凸起的按钮,配置了此值,依然需要配置list 参数中需凸起项的midButton 为true ,见上方说明 | Boolean | false | true |
before-switch | 切换之前的回调钩子,见上方说明 | Function | - | - |
border-top | 是否显示顶部的边框 | Boolean | true | false |
hide-tab-bar 1.5.6 | 是否隐藏原生tabbar | Boolean | true | false |
Events
事件名 | 说明 | 回调参数 |
---|---|---|
change | 切换选项时触发 | index:当前要切换项的索引 |
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论