易语言资源网 - 做最全的易语言资源下载社区
【周六更新】【2021开源大赛(第六届)】全部参赛作品信息 精易论坛授权登录

【零基础学会uniapp】第六课:底部tabbar的使用   [复制链接]

    2021-10-22 11:47:48
    uni-app
    易语言资源网
    176 次浏览

6、 底部tabbar的使用

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

如果需要使用原生的tabbar,则需要在pages.json中进行配置:

建议使用原生tabbar进行开发,非原生的tabbar可能会有卡顿和延迟

在 pages.json 中提供 tabBar 配置,不仅仅是为了方便快速开发导航,更重要的是在App和小程序端提升性能。在这两个平台,底层原生引擎在启动时无需等待js引擎初始化,即可直接读取 pages.json 中配置的 tabBar 信息,渲染原生tab。

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

属性类型必填默认值描述平台差异说明
colorHexColortab 上的文字默认颜色
selectedColorHexColortab 上的文字选中时的颜色
backgroundColorHexColortab 的背景色
borderStyleStringblacktabbar 上边框的颜色,可选值 black/whiteApp 2.3.4+ 支持其他颜色值、H5 3.0.0+
blurEffectStringnoneiOS 高斯模糊效果,可选值 dark/extralight/light/none(参考:使用说明App 2.4.0+ 支持、H5 3.0.0+(只有最新版浏览器才支持)
listArraytab 的列表,详见 list 属性说明,最少2个、最多5个 tab
positionStringbottom可选值 bottom、toptop 值仅微信小程序支持
fontSizeString10px文字默认大小App 2.3.4+、H5 3.0.0+
iconWidthString24px图标默认宽度(高度等比例缩放)App 2.3.4+、H5 3.0.0+
spacingString3px图标和文字的间距App 2.3.4+、H5 3.0.0+
heightString50pxtabBar 默认高度App 2.3.4+、H5 3.0.0+
midButtonObject中间按钮 仅在 list 项为偶数时有效App 2.3.4+、H5 3.0.0+

其中 list 接收一个数组,数组中的每个项都是一个对象,其属性值如下:

属性类型必填说明
pagePathString页面路径,必须在 pages 中先定义
textStringtab 上按钮文字,在 App 和 H5 平台为非必填。例如中间可放一个没有文字的+号图标
iconPathString图片路径,icon 大小限制为40kb,建议尺寸为 81px * 81px,当 position 为 top 时,此参数无效,不支持网络图片,不支持字体图标
selectedIconPathString选中时的图片路径,icon 大小限制为40kb,建议尺寸为 81px * 81px ,当 position 为 top 时,此参数无效

midButton 属性说明

属性类型必填默认值描述
widthString80px中间按钮的宽度,tabBar 其它项为减去此宽度后平分,默认值为与其它项平分宽度
heightString50px中间按钮的高度,可以大于 tabBar 高度,达到中间凸起的效果
textString中间按钮的文字
iconPathString中间按钮的图片路径
iconWidthString24px图片宽度(高度等比例缩放)
backgroundImageString中间按钮的背景图片路径
"tabBar": {
       "color": "#8A8A8A",
       "selectedColor": "#0081ff",
       "borderStyle": "#EEEEEE",
       "backgroundColor": "#F8F8F8",
       "list": [ {
               "pagePath": "pages/index/index",
               "iconPath": "static/index.png",
               "selectedIconPath": "static/index_select.png",
               "text": "概况"
          },
          {
               "pagePath": "pages/user/user",
               "iconPath": "static/user.png",
               "selectedIconPath": "static/user_select.png",
               "text": "用户"
          }
      ],
       "midButton": {
           "height": "60px",
           "iconPath": "static/add.png",
           "text": "添加"
      }
  }

本课引用链接:

阿里巴巴矢量图标库:https://www.iconfont.cn/

注意事项:https://uniapp.dcloud.io/collocation/pages?id=tips-tabbar

更多tabbar操作: https://uniapp.dcloud.io/api/ui/tabbar?id=settabbaritem

可参考官方例程: 新建-项目-uni-app-底部选项卡模板

@ 课件下载、更多教程、遇到问题或者进行交流,请到: https://bbs.125.la/forum.php?mod=forumdisplay&fid=226 进行发帖交流

加QQ群:326576256





点我下载 (已有 18 次下载)

[错误报告]   上一篇:E2EE网课交单平台...     下一篇:炫彩界面库 自绘图表...