位置:电子教程 > Uni-app入门到精通教程 (如果看不到内容请使用360浏览器) 推荐学习资源
前言
第1章 uni-app入门
2.1.1 应用生命周期
2.2 路由
2.3 运行环境判断
2.4 页面样式与布局
2.5 template 和 block
2.7 NPM支持
2.8 TypeScript 支持
2.9 小程序组件支持
2.10 WXS
3.1 配置概要
3.2 配置项列表 pages.json
3.3 manifest.json 配置项列表
3.4 package.json
3.5 vue-config.js
3.6 uni.scss
3.7 App.vue 3.7.1 应用生命周期
3.8 main.js
4.1 JSON 简介
4.2 JSON 语法
4.3 JSON 对象
4.4 JSON 数组
4.5 JSON.parse()
4.6 JSON.stringify()转字符串
4.7 eval函数
5.1uni-app常用语法
5.2 uni-app接口的使用
5.3 uni-app中表单的使用
5.4 uni-app中参数的使用
第6章 uni-app常用组件
当前阅读教程:Uni-app入门到精通教程 > 3.2.5 tabBar
阅读(22555525)      收藏       赞(5685)      分享
上一篇: 3.2.4 easycom 下一篇: 3.2.6 condition

3.2.5 tabBar

如果应用是一个多 tab 应用,可以通过 tabBar 配置项指定 tab 栏的表现,以及 tab 切换时显示的对应页。

       注意事项:

n  当设置 position top 时,将不会显示 icon

n  tabBar 中的 list 是一个数组,只能配置最少2个、最多5 tabtab 按数组的顺序排序。

n  tabbar 切换第一次加载时可能渲染不及时,可以在每个tabbar页面的onLoad生命周期里先弹出一个等待雪花(hello uni-app使用了此方式)

n  tabbar 的页面展现过一次后就保留在内存中,再次切换 tabbar 页面,只会触发每个页面的onShow,不会再触发onLoad

n  顶部的 tabbar 目前仅微信小程序上支持,需要用到顶部选项卡的话,参考 hello uni-app->模板->顶部选项卡。

image.png

image.png

midButton没有pagePath,需监听点击事件,自行处理点击后的行为逻辑。监听点击事件为调用APIuni.onTabBarMidButtonTap

tabbar常见问题

n  tabbar js api 见接口-界面-tabbar,可实现动态显示隐藏(如弹出层无法覆盖tabbar)、内容修改(如国际化)、item加角标等功能。hello uni-app中也有示例

小白教程网www.2d5.net

n  tabbar item 点击事件见页面生命周期的onTabItemTap

n  代码跳转到tabbar页面,api只能使用uni.switchTab,不能使用uni.navigateTouni.redirectTo;使用navigator组件跳转时必须设置open-type="switchTab"

n  tabbar H5端是div模拟的,属于前端屏幕窗口的一部分,如果要使用bottom居底定位方式,应该使用css变量--window-bottom,比如悬浮在tabbar上方10px的按钮,样式如下bottom: calc(var(--window-bottom) + 10px)

n  中间带+号的tabbar模板例子,参考。可跨端,但+号不凸起。

n  如需 tabbar 中间凸起,可自定义tabbar,插件市场有例子,如colorUI等。但注意前端tabbar的性能不如原生tabbar,如果是多页方式,底部tabbar会在切换时闪执行转场动画,如果是单页方式,承载复杂页面内容会有性能问题。插件市场搜索tabbar有不少类似例子。

n  App端若使用nvue,自定义tabbar,没有性能体验问题。

n  nvue项目(manifestrenderernative),目前使用pages.json里的tabbar反而影响性能,建议使用前端自己实现单页面的tabbar。后续会解决这个bug

n  Android App上弹出键盘顶起tabbar的问题。如果是搜索框,建议点击后新开页面搜索(hello uni-app有例子);也可以配置 manifest.json app-plus->softinput->mode 设置为 adjustPan,注意从HBuilderX 2.2开始,默认就是adjustPan,请不要手动改为adresize。另外修改输入法弹出模式需打包后生效。详见manifest配置;也可以动态隐藏tabbar

n  原生的tabbar只有一个且在首页。二级页的tab,前端自己实现。

n  如果是需要先登录、后进入tab页面,不需要把登陆页设为首页,首页仍然是tabbar页,可参考HBuilderX新建uni-app项目时的登陆模板

n  前端弹出遮罩层挡不住tabbar的问题,跨端处理方式时动态隐藏tabbarApp端可以使用plus.nativeObj.viewsubNVue做弹出和遮罩,可参考这个底部原生图标分享菜单例子

n  微信小程序模拟器1.02.1904090版有bug,在缩放模拟器页面百分比后,tabbar点击多次后就会卡死。真机无碍,使用时注意。详见

代码示例

小白教程网www.2d5.net

"tabBar": {

    "color": "#7A7E83",

    "selectedColor": "#3cc51f",

    "borderStyle": "black",

    "backgroundColor": "#ffffff",

    "list": [{

        "pagePath": "pages/component/index",

        "iconPath": "static/image/icon_component.png",

        "selectedIconPath": "static/image/icon_component_HL.png",

        "text": "组件"

    }, {

        "pagePath": "pages/API/index",

        "iconPath": "static/image/icon_API.png",

        "selectedIconPath": "static/image/icon_API_HL.png",

        "text": "接口"

    }]

}


【uniapp参考资料】

(1)uni-app跨平台开发 入门到实战 

https://ke.qq.com/course/package/26512


(2)uni-app 完整商城界面设计实战  

https://ke.qq.com/course/2381059


(3)基于vue的uniapp商城完整项目源代码 

https://ke.qq.com/course/3064977


(4)毕业设计网

http://www.pc-365.net


(5)小程序编程网

http://www.4317.org


(6)计算机编程网

http://www.05423.com




上一篇: 3.2.4 easycom 下一篇: 3.2.6 condition
毕业设计网             广告联系QQ:45157718(微信同号)