如何为mpvue项目添加底部tab

honey缘木鱼

发布于 2019-03-04 11:04:02

7450

发布于 2019-03-04 11:04:02

文章被收录于专栏：娱乐心理测试娱乐心理测试

文章https://vip.kingdee.com/article/10314中已经实现快速创建一个mpvue项目，在这里以此为基础实现如何添加底部tab。 一.参考项目实例

1.创建后的项目界面如下图：

从图中可以看出已经有首页，订单为例，由此，我们只需要做适当的更改即可。

2.查看图片位置，修改为自己需要

把tabs文件夹下的图片，放入自己需要的。

用webStorm打开项目中的src文件夹

打开webStorm

选中src文件

4.修改webstorm下的app.json

 "tabBar": {
    "color": "#999",
    "backgroundColor": "#fafafa",
    "selectedColor": "rgb(241,99,8)",
    "borderStyle": "white",

    "list": [{
      "text": "首页",
      "pagePath": "pages/index/main",
      "iconPath": "static/tabs/tab1.png",
      "selectedIconPath": "static/tabs/tab_1.png"
    }, {
      "text": "购物车",
      "pagePath": "pages/logs/main",
      "iconPath": "static/tabs/tab3.png",
      "selectedIconPath": "static/tabs/tab3_.png"
    },
    {
      "text": "我的",
      "pagePath": "pages/logs/main",
      "iconPath": "static/tabs/tab4.png",
      "selectedIconPath": "static/tabs/tab4_.png"
    }],

    "items": [{
      "name": "首页",
      "pagePath": "pages/index/main",
      "icon": "static/tabs/home.png",
      "activeIcon": "static/tabs/home-active.png"
    }, {
      "text": "购物车",
      "pagePath": "pages/logs/main",
      "iconPath": "static/tabs/tab3.png",
      "selectedIconPath": "static/tabs/tab3_.png"
    },
    {
      "text": "我的",
      "pagePath": "pages/logs/main",
      "iconPath": "static/tabs/tab4.png",
      "selectedIconPath": "static/tabs/tab4_.png"
    }],
    "position": "bottom"
  }