请选择 进入手机版 | 继续访问电脑版

学JAVA网

 找回密码
 立即注册

5.1 底部菜单导航实现

[复制链接]
发表于 2018-12-6 11:28:29 |显示全部楼层
5.1 底部菜单导航实现

完成实例:
            

底部导航图

底部导航图


我们想用Uniapp实现这种案例是非常简单的。
            


dfaf
era.png


fadfa;;
  1. {
  2.     "pages": [ //pages数组中第一项表示应用启动页,
  3.         {
  4.             "path": "pages/main/main",
  5.             "style": {
  6.                 "navigationBarTitleText": "首页"
  7.             }
  8.         }, {
  9.             "path": "pages/login/login",
  10.             "style": {
  11.                 "navigationBarTitleText": "登录"
  12.             }
  13.         }, {
  14.             "path": "pages/reg/reg",
  15.             "style": {
  16.                 "navigationBarTitleText": "注册"
  17.             }
  18.         }, {
  19.             "path": "pages/pwd/pwd",
  20.             "style": {
  21.                 "navigationBarTitleText": "找回密码"
  22.             }
  23.         }, {
  24.             "path": "pages/user/user",
  25.             "style": {
  26.                 "navigationBarTitleText": "我的"
  27.             }
  28.         },
  29.                  {
  30.                         "path": "pages/edit/edit",
  31.                         "style": {
  32.                                 "navigationBarTitleText": "发表"
  33.                         }
  34.                 },
  35.                  {
  36.                         "path": "pages/news/news",
  37.                         "style": {
  38.                                 "navigationBarTitleText": "资讯"
  39.                         }
  40.                 },
  41.                  {
  42.                         "path": "pages/orderDetail/main",
  43.                         "style": {
  44.                                 "navigationBarTitleText": "内容"
  45.                         }
  46.                 },
  47.                  {
  48.                         "path": "pages/fujin/fujin",
  49.                         "style": {
  50.                                 "navigationBarTitleText": "附近"
  51.                         }
  52.                 }
  53.     ],
  54.     "tabBar": {
  55.         "color": "#7a7e83",
  56.         "selectedColor": "#0faeff",
  57.         "backgroundColor": "#ffffff",
  58.         "list": [{
  59.             "pagePath": "pages/main/main",
  60.             "text": "首页",
  61.             "iconPath": "static/img/home.png",
  62.             "selectedIconPath": "static/img/homeHL.png"
  63.         },
  64.                 {
  65.                         "pagePath": "pages/fujin/fujin",
  66.                         "text": "附近",
  67.                         "iconPath": "static/img/fujin.png",
  68.                         "selectedIconPath": "static/img/fujinHL.png"
  69.                 },
  70.                 {
  71.                         "pagePath": "pages/edit/edit",
  72.                         "text": "发表",
  73.                         "iconPath": "static/img/edit.png",
  74.                         "selectedIconPath": "static/img/editHL.png"
  75.                 },
  76.                 {
  77.                         "pagePath": "pages/news/news",
  78.                         "text": "资讯",
  79.                         "iconPath": "static/img/search.png",
  80.                         "selectedIconPath": "static/img/searchHL.png"
  81.                 },{
  82.             "pagePath": "pages/user/user",
  83.             "text": "我的",
  84.             "iconPath": "static/img/user.png",
  85.             "selectedIconPath": "static/img/userHL.png"
  86.         }]
  87.     },
  88.     "globalStyle": {
  89.         "navigationBarTextStyle": "white",
  90.         "navigationBarBackgroundColor": "#0faeff",
  91.         "backgroundColor": "#fbf9fe"
  92.     }
  93. }
复制代码
fakjfa



dfajkfja


fakdfjak
您需要登录后才可以回帖 登录 | 立即注册

Archiver|手机版|学JAVA网

GMT+8, 2018-12-16 22:00 , Processed in 0.191340 second(s), 32 queries .

Powered by Discuz! X2.5

© 2001-2012 Comsenz Inc.

Copyright © 2015-2018 xuejava网 / 鲁ICP备17054568号-1
回顶部