uni-app x开发商城系统，tabBar

一、概述

使用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，就可以正常显示了。