一、概述
使用uni-app x框架开发的一款多平台支持的电子商务平台。它的主要特点是一次开发,多处使用,可以同时在Android,iOS,鸿蒙next,Web,微信小程序等多个平台上运行。
效果如下:
二、tabBar
如果应用是一个多 tab 应用,可以通过 tabBar 配置项指定一级导航栏,以及 tab 切换时显示的对应页。
在 pages.json 中提供 tabBar 配置,不仅仅是为了方便快速开发导航,更重要的是在 App 和小程序端提升性能。在这两个平台,底层原生引擎在启动时无需等待 js 引擎初始化,即可直接读取 pages.json 中配置的 tabBar 信息,渲染原生 tab。
上面图片,底部展示的几个图标区域,就是tabBar
三、实现tabBar
目录结构
在pages目录,新建3个文件夹,cart,member,news,并在目录下,新增同名的uvue文件,结构如下:
./ ├── cart │ └── cart.uvue ├── index │ └── index.uvue ├── login │ └── login.uvue ├── member │ └── member.uvue └── news└── news.uvue
uvue文件,保持默认,在view里面,写对应的名字即可,比如cart.uvue内容如下:
<template><view>购物车</view> </template><script>export default {data() {return {}},methods: {}} </script><style></style>
在static目录,新增目录icon,用来放图标文件。
./ ├── cart-active.png ├── cart.png ├── home-active.png ├── home.png ├── member-active.png ├── member.png ├── news-active.png └── news.png
这个文件,大家可以从网络上,剪切一个即可。
最后修改pages.json,这个才是重点。
完整内容如下:
{"pages": [ //pages数组中第一项表示应用启动页,参考:https://doc.dcloud.net.cn/uni-app-x/collocation/pagesjson.html {"path": "pages/index/index"// "style": {// "navigationBarTitleText": "uni-app x"// } },{"path": "pages/login/login"},{"path": "pages/cart/cart"},{"path": "pages/member/member"},{"path": "pages/news/news"}],"globalStyle": {"navigationBarTextStyle": "white","navigationBarTitleText": "uni-app x商城","navigationBarBackgroundColor": "#fe9b95","backgroundColor": "#F8F8F8"},"uniIdRouter": {},"easycom": {"autoscan": true,"custom": {"^u--(.*)": "uview-plus/components/u-$1/u-$1.vue","^up-(.*)": "uview-plus/components/u-$1/u-$1.vue","^u-([^-].*)": "uview-plus/components/u-$1/u-$1.vue"}},"tabBar": {"selectedColor": "#fe9b95","color": "#c0c0c0","list": [{"text": "首页","pagePath": "pages/index/index","iconPath": "/static/icon/home.png","selectedIconPath": "/static/icon/home-active.png"},{"text": "资讯","pagePath": "pages/news/news","iconPath": "/static/icon/news.png","selectedIconPath": "/static/icon/news-active.png"},{"text": "购物车","pagePath": "pages/cart/cart","iconPath": "/static/icon/cart.png","selectedIconPath": "/static/icon/cart-active.png"},{"text": "会员","pagePath": "pages/member/member","iconPath": "/static/icon/member.png","selectedIconPath": "/static/icon/member-active.png"}]} }
主要看tabBar相关参数:
- color:tab 上的文字默认颜色
- selectedColor:tab 上的文字选中时的颜色
- list:tab 的列表,详见 list 属性说明,最少 2 个、最多 5 个 tab
其中 list 接收一个数组,数组中的每个项都是一个对象
- text:tab 上按钮文字,在 App 和 H5 平台为非必填。例如中间可放一个没有文字的+号图标
- pagePath:页面路径,必须在 pages 中先定义
- iconPath:图片路径,icon 大小限制为 40kb,建议尺寸为 81px * 81px,当 position 为 top 时,此参数无效,不支持网络图片,不支持字体图标
- selectedIconPath:选中时的图片路径,icon 大小限制为 40kb,建议尺寸为 81px * 81px ,当 position 为 top 时,此参数无效
最后,重新编译运行,底部的tabBar,就可以正常显示了。