uni-app中怎么设置导航栏?怎么修改默认端口?下面本篇文章给大家介绍一下uni-app导航栏设置,以及在pages.json里面配置并修改默认端口的方法。
设置导航栏
全局导航栏样式设置: 在 pages.json
的 globalStyle
里进行各个参数配置。【相关推荐:《uniapp教程》】
"globalStyle": { "navigationBarTextStyle": "black", "navigationBarTitleText": "Hello uniapp", "navigationBarBackgroundColor": "#F8F8F8", "backgroundColor": "#F8F8F8", "backgroundColorTop": "#F4F5F6", "backgroundColorBottom": "#F4F5F6", "mp-alipay": { "titleBarColor": "#FFFFFF" } },
单页面导航栏样式设置:每个 page
下面的 style
配置中的 navigationBar
各个参数配置,即为通用配置,小程序、app、h5均生效。参考style设置每个页面的状态栏、导航条、标题、窗口背景色等
{ "path": "pages/index/index", "style": { "navigationBarTitleText": "主页", } },
我的一个demo的 pages.json
简单配置(这里引入了 uView)
{ "easycom": { //uni-app为了调试性能的原因,修改easycom规则不会实时生效,配置完后,您需要重启HX或者重新编译项目才能正常使用uView的功能。 "^u-(.*)": "@/uview-ui/components/u-$1/u-$1.vue" }, "pages": [ //pages数组中第一项表示应用启动页,参考:https://uniapp.dcloud.io/collocation/pages { "path": "pages/index/index", "style": { "navigationBarTitleText": "首页" } }, { "path": "pages/class/index", "style": { "navigationBarTitleText": "分类" } }, { "path": "pages/car/index", "style": { "navigationBarTitleText": "购物车" } }, { "path": "pages/mine/index", "style": { "navigationBarTitleText": "我的" } }, { "path": "pages/address/addSite", "style": { "navigationBarTitleText": "添加用户地址" } }, { "path": "pages/address/index", "style": { "navigationBarTitleText": "用户地址" } } ], //底部导航栏 "tabBar": { "color": "#999", //当前字体颜色 "selectedColor": "#333", //点击激活的字体颜色 "backgroundColor": "#F0F3F6", //背景颜色 "borderStyle": "white", "list": [{ "text": "首页", //字体 "iconPath": "static/tabs/home.png", // 当前图片的颜色 "selectedIconPath": "static/tabs/home-active.png", // 选中图片的颜色 "pagePath": "pages/index/index" //路径 }, { "text": "分类", "iconPath": "static/tabs/welfare.png", "selectedIconPath": "static/tabs/welfare-active.png", "pagePath": "pages/class/index" }, { "text": "购物车", "iconPath": "static/tabs/shop-car.png", "selectedIconPath": "static/tabs/shop-caron.png", "pagePath": "pages/car/index" }, { "text": "我的", "iconPath": "static/tabs/my.png", "selectedIconPath": "static/tabs/my-active.png", "pagePath": "pages/mine/index" } ] }, "globalStyle": { "navigationBarTextStyle": "black", "navigationBarTitleText": "异联盟", "navigationBarBackgroundColor": "#fff", "backgroundColor": "#F8F8F8", "backgroundTextStyle": "light" } }
结果如下:
修改端口
uni-app
默认端口为 8080
,与 tomcat
的默认端口冲突。
解决方案一:不推荐
先启动 tomcat
,再启动 uni-app
端口会自动修改为 8081
。
解决方案二:
打开项目--->打开 manifest.json
文件,选择h5配置,设置端口就可以了。
更多编程相关知识,请访问:编程入门!!
以上是浅析uni-app中设置导航栏和修改默认端口的方法的详细内容。更多信息请关注PHP中文网其他相关文章!

VSCode中如何开发uni-app?下面本篇文章给大家分享一下VSCode中开发uni-app的教程,这可能是最好、最详细的教程了。快来看看!

抖音界面的导航栏位于顶部,是用户快速访问不同功能和内容的重要通道。随着抖音的不断更新,用户可能希望能够根据个人喜好和需求对导航栏进行自定义和调整。一、抖音顶部的导航栏如何调整?通常,抖音的顶部导航栏会展示一些热门频道,让用户方便快速浏览和查看感兴趣的内容。如果您想调整顶部频道的设置,只需按照以下步骤操作即可:打开抖音应用并登录您的账号。在主界面上方找到导航栏,通常位于屏幕中间或顶部。点击导航栏上方的“+”符号或类似的按钮,进入频道编辑界面。在频道编辑界面中,您可以看到默认的热门频道列表。您可以通

如何利用uniapp开发一个贪吃蛇小游戏?下面本篇文章就手把手带大家在uniapp中实现贪吃蛇小游戏,希望对大家有所帮助!

纯CSS实现带阴影效果的菜单导航栏的实现步骤,需要具体代码示例在网页设计中,菜单导航栏是一个非常常见的元素。通过给菜单导航栏添加阴影效果,不仅可以增加其美观度,还可以提升用户体验。在本文中,我们将使用纯CSS来实现一个带阴影效果的菜单导航栏,并提供具体的代码示例供参考。实现步骤如下:创建HTML结构首先,我们需要创建一个基本的HTML结构来容纳菜单导航栏。以

uni-app接口,全局方法封装1.在根目录创建一个api文件,在api文件夹中创建api.js,baseUrl.js和http.js文件2.baseUrl.js文件代码exportdefault"https://XXXX.test03.qcw800.com/api/"3.http.js文件代码exportfunctionhttps(opts,data){lethttpDefaultOpts={url:opts.url,data:data,method:opts.method

本篇文章给大家带来了关于uniapp的相关知识,其中主要整理了实现多选框的全选功能的相关问题,无法实现全选的原因是动态修改checkbox的checked字段时,界面上的状态能够实时变化,但是无法触发checkbox-group的change事件,下面一起来看一下,希望对大家有帮助。

本篇文章手把手带大家开发一个uni-app日历插件,介绍下一款日历插件是如何从开发到发布的,希望对大家有所帮助!


热AI工具

Undresser.AI Undress
人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool
免费脱衣服图片

Clothoff.io
AI脱衣机

AI Hentai Generator
免费生成ai无尽的。

热门文章

热工具

SublimeText3汉化版
中文版,非常好用

螳螂BT
Mantis是一个易于部署的基于Web的缺陷跟踪工具,用于帮助产品缺陷跟踪。它需要PHP、MySQL和一个Web服务器。请查看我们的演示和托管服务。

MinGW - 适用于 Windows 的极简 GNU
这个项目正在迁移到osdn.net/projects/mingw的过程中,你可以继续在那里关注我们。MinGW:GNU编译器集合(GCC)的本地Windows移植版本,可自由分发的导入库和用于构建本地Windows应用程序的头文件;包括对MSVC运行时的扩展,以支持C99功能。MinGW的所有软件都可以在64位Windows平台上运行。

禅工作室 13.0.1
功能强大的PHP集成开发环境

SublimeText3 Mac版
神级代码编辑软件(SublimeText3)