uniapp如何自定义导航栏,

  uniapp如何自定义导航栏,

  单一应用程序中怎么设置导航栏?怎么修改默认端口?下面本篇文章给大家介绍一下单一应用程序导航栏设置,以及在页面。数据里面配置并修改默认端口的方法。

  单一应用程序开发(仿饿了么)开发课程:进入学习

  

设置导航栏

  全局导航栏样式设置: 在 pages.json 的 globalStyle 里进行各个参数配置。【相关推荐: 《uniapp教程》 】

  globalStyle: {

  navigationBarTextStyle“:”黑色,

  navigationBarTitleText“:”你好uniapp ,

  navigationBarBackgroundColor : # f8f8f 8 ,

  backgroundColor: #F8F8F8 ,

  backgroundColorTop: #F4F5F6 ,

  backgroundColorBottom : # f4f5f 6 ,

  MP-支付宝:{

  标题栏颜色: #FFFFFF

  }

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

  {

  路径:页面/索引/索引,

  样式:{

  navigationBarTitleText ":"主页,

  }

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

  {

  easycom: { //uni-app为了调试性能的原因,修改easycom规则不会实时生效,配置完后,您需要重启血液结合素或者重新编译项目才能正常使用uView的功能。

  ^u-(.*): @/u view-ui/components/u-$ 1/u-$ 1。vue

  },

  pages :[//页数组中第一项表示应用启动页,参考:https://uni app。d云。io/搭配/页面

  {

  路径:页面/索引/索引,

  样式:{

  navigationBarTitleText ":"首页

  }

  }, {

  路径:页/类/索引,

  样式:{

  navigationBarTitleText ":"分类

  }

  },

  {

  路径:页面/汽车/索引,

  样式:{

  navigationBarTitleText ":"购物车

  }

  },

  {

  路径:页/矿/索引,

  样式:{

  navigationBarTitleText ":"我的

  }

  },

  {

  path: pages/address/addSite ,

  样式:{

  navigationBarTitleText ":"添加用户地址

  }

  },

  {

  路径:页面/地址/索引,

  样式:{

  navigationBarTitleText ":"用户地址

  }

  }

  ],

  //底部导航栏

  tabBar: {

  颜色: #999 ,//当前字体颜色

  selectedColor: #333 ,//点击激活的字体颜色

  backgroundColor: #F0F3F6 ,//背景颜色

  边框样式:白色,

  列表:[{

  文本: 首页, //字体

  iconPath : static/tabs/home。 png ,//当前图片的颜色

  selectedIconPath : static/tabs/home-active。 png ,//选中图片的颜色

  页面路径: pages/index/index //路径

  },

  {

  文本: 分类,

  iconPath : static/tabs/welfare。巴布亚新几内亚,

  selectedIconPath : static/tabs/welfare-active。巴布亚新几内亚,

  页面路径:页面/类别/索引

  },

  {

  文本: 购物车,

  iconPath :静态/标签/车间-汽车。巴布亚新几内亚,

  selectedIconPath : static/tabs/shop-Caron。巴布亚新几内亚,

  页面路径:页面/汽车/索引

  },

  {

  文本: 我的,

  iconPath: static/tabs/my.png ,

  selectedIconPath : static/tabs/my-active。巴布亚新几内亚,

  页面路径:页面/我的/索引

  }

  ]

  },

  globalStyle: {

  navigationBarTextStyle“:”黑色,

  navigationBarTitleText ":"异联盟,

  navigationBarBackgroundColor : # fff ,

  backgroundColor: #F8F8F8 ,

  backgroundTextStyle: light

  }

  }结果如下:

  

修改端口

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

  

解决方案一:不推荐

   先启动雄猫,再启动单一应用程序端口会自动修改为8081 。

  

解决方案二:

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

  更多编程相关知识,请访问:编程入门!以上就是浅析单一应用程序中设置导航栏和修改默认端口的方法的详细内容,更多请关注我们其它相关文章!

郑重声明:本文由网友发布,不代表盛行IT的观点,版权归原作者所有,仅为传播更多信息之目的,如有侵权请联系,我们将第一时间修改或删除,多谢。

留言与评论(共有 条评论)
   
验证码: