浅析uni-app中设置导航栏和修改默认端口的方法

 6244

uni-app中怎么设置导航栏?怎么修改默认端口?下面本篇文章给大家介绍一下uni-app导航栏设置,以及在pages.json里面配置并修改默认端口的方法。


浅析uni-app中设置导航栏和修改默认端口的方法


设置导航栏

全局导航栏样式设置: 在 pages.json 的 globalStyle 里进行各个参数配置。

  1. "globalStyle": {
  2.     "navigationBarTextStyle": "black",
  3.     "navigationBarTitleText": "Hello uniapp",
  4.     "navigationBarBackgroundColor": "#F8F8F8",
  5.     "backgroundColor": "#F8F8F8",
  6.     "backgroundColorTop": "#F4F5F6",
  7.     "backgroundColorBottom": "#F4F5F6",
  8.     "mp-alipay": {
  9.         "titleBarColor": "#FFFFFF"
  10.     }
  11. },

单页面导航栏样式设置:每个 page 下面的 style 配置中的 navigationBar 各个参数配置,即为通用配置,小程序、app、h5均生效。参考style设置每个页面的状态栏、导航条、标题、窗口背景色等

  1. {
  2.     "path": "pages/index/index",
  3.     "style": {
  4.         "navigationBarTitleText": "主页",  
  5.     }
  6. },

我的一个demo的 pages.json 简单配置(这里引入了 uView)

  1. {
  2.     "easycom": { //uni-app为了调试性能的原因,修改easycom规则不会实时生效,配置完后,您需要重启HX或者重新编译项目才能正常使用uView的功能。
  3.         "^u-(.*)": "@/uview-ui/components/u-$1/u-$1.vue"
  4.     },
  5.     "pages": [ //pages数组中第一项表示应用启动页,参考:https://uniapp.dcloud.io/collocation/pages
  6.         {
  7.             "path": "pages/index/index",
  8.             "style": {
  9.                 "navigationBarTitleText": "首页"
  10.             }
  11.         }, {
  12.             "path": "pages/class/index",
  13.             "style": {
  14.                 "navigationBarTitleText": "分类"
  15.             }
  16.         },
  17.         {
  18.             "path": "pages/car/index",
  19.             "style": {
  20.                 "navigationBarTitleText": "购物车"
  21.             }
  22.         },
  23.         {
  24.             "path": "pages/mine/index",
  25.             "style": {
  26.                 "navigationBarTitleText": "我的"
  27.             }
  28.         },
  29.         {
  30.             "path": "pages/address/addSite",
  31.             "style": {
  32.                 "navigationBarTitleText": "添加用户地址"
  33.             }
  34.         },
  35.         {
  36.             "path": "pages/address/index",
  37.             "style": {
  38.                 "navigationBarTitleText": "用户地址"
  39.             }
  40.         }
  41.     ],
  42.     //底部导航栏
  43.     "tabBar": {
  44.         "color": "#999", //当前字体颜色
  45.         "selectedColor": "#333", //点击激活的字体颜色
  46.         "backgroundColor": "#F0F3F6", //背景颜色
  47.         "borderStyle": "white",
  48.         "list": [{
  49.                 "text": "首页", //字体
  50.                 "iconPath": "static/tabs/home.png", // 当前图片的颜色
  51.                 "selectedIconPath": "static/tabs/home-active.png", // 选中图片的颜色
  52.                 "pagePath": "pages/index/index" //路径
  53.             },
  54.             {
  55.                 "text": "分类",
  56.                 "iconPath": "static/tabs/welfare.png",
  57.                 "selectedIconPath": "static/tabs/welfare-active.png",
  58.                 "pagePath": "pages/class/index"
  59.             },
  60.             {
  61.                 "text": "购物车",
  62.                 "iconPath": "static/tabs/shop-car.png",
  63.                 "selectedIconPath": "static/tabs/shop-caron.png",
  64.                 "pagePath": "pages/car/index"
  65.             },
  66.             {
  67.                 "text": "我的",
  68.                 "iconPath": "static/tabs/my.png",
  69.                 "selectedIconPath": "static/tabs/my-active.png",
  70.                 "pagePath": "pages/mine/index"
  71.             }
  72.         ]
  73.     },
  74.     "globalStyle": {
  75.         "navigationBarTextStyle": "black",
  76.         "navigationBarTitleText": "异联盟",
  77.         "navigationBarBackgroundColor": "#fff",
  78.         "backgroundColor": "#F8F8F8",
  79.         "backgroundTextStyle": "light"
  80.     }
  81. }

结果如下:


浅析uni-app中设置导航栏和修改默认端口的方法



修改端口

uni-app 默认端口为 8080,与 tomcat 的默认端口冲突。

解决方案一:不推荐

先启动 tomcat,再启动 uni-app 端口会自动修改为 8081 。

解决方案二:

打开项目--->打开 manifest.json 文件,选择h5配置,设置端口就可以了。


浅析uni-app中设置导航栏和修改默认端口的方法

本文网址:https://www.zztuku.com/detail-9121.html
站长图库 - 浅析uni-app中设置导航栏和修改默认端口的方法
申明:如有侵犯,请 联系我们 删除。

评论(0)条

您还没有登录,请 登录 后发表评论!

提示:请勿发布广告垃圾评论,否则封号处理!!

    编辑推荐