uni-app设置导航栏和修改默认端口的方法
设置导航栏
"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配置,设置端口就可以了。
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanfchae
系列文章
更多
同类精品
更多
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
怎样阻止微信小程序自动打开
PHP中文网 06-13 -
excel下划线不显示怎么办
PHP中文网 06-23 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
photoshop蒙版画笔没反应怎么办
PHP中文网 06-24