湖南省柒点文化
传媒有限公司

如何在app.json配置顶部导航和底部导航?

作者:企师爷来源:柒点传媒

app.json文件在后台是看不到的,是在后台打包的时候动态生成的,是根据后台的导航、顶部导航和底部导航的设置生成的文件。


app.json需要用开发者工具打开才能看到。

1、pages页面路径列表

"pages": [
"pages/index/index", 首页
"pages/index/list_product", 产品列表
"pages/index/index_product", 产品中心
"pages/index/index_article", 文章中心
"pages/index/info_product", 产品详情
"pages/index/list_article", 文章列表
"pages/index/info_article", 文章详情
"pages/index/page", 单页面
"pages/index/page_8", 自定义页面,和page类似
"pages/index/solution", 自定义页面,解决方案
"pages/index/ask" 自定义页面,在线留言
]

图片源自网络

2、window全局的默认窗口表现


"window": {
"navigationBarBackgroundColor": "#ffffff", 顶部标题栏背景颜色
"navigationBarTitleText": "兴邦科技小程序", 顶部标题栏 标题文字内容
"navigationBarTextStyle": "black", 顶部标题栏标题颜色
"backgroundTextStyle": "black", 下拉 loading 的样式,仅支持 dark / light,默认值:dark
"enablePullDownRefresh": false
}


3、底部 tab 栏的表现,即底部导航

"tabBar": {
"color": "#ffffff", 底部导航默认文字颜色
"selectedColor": "#000000", 底部导航选中时文字颜色
"borderStyle": "black", 底部导航边框颜色
"backgroundColor": "#C00;", 底部导航背景颜色
"list": [{
"pagePath": "pages/index/index", 底部导航首页代码路径
"iconPath": "images/index_img.png", 底部导航首页默认显示的图标
"selectedIconPath": "images/index_img.png", 底部导航首页选中时显示的图标
"text": "首页" 底部导航首页显示的文字
}, {
"pagePath": "pages/index/index_product", 底部导航产品中心代码路径
"iconPath": "images/product_footer.png", 底部导航产品中心默认显示的图标
"selectedIconPath": "images/product_footer.png", 底部导航产品中心选中时显示的图标
"text": "产品中心" 底部导航产品中心显示的文字
}, {
"pagePath": "pages/index/index_article",
"iconPath": "images/news_footer.png",
"selectedIconPath": "images/news_footer.png",
"text": "新闻中心"
},{
"pagePath": "pages/index/solution",
"iconPath": "images/index_service.png",
"selectedIconPath": "images/index_service.png",
"text": "解决方案"
}, {
"pagePath": "pages/index/ask",
"iconPath": "images/message_footer.png",
"selectedIconPath": "images/message_footer.png",
"text": "在线留言"
}]
}


以上就是《如何在app.json配置顶部导航和底部导航?》的全部内容,感谢阅读,希望对你有帮助!


网站定制化服务
小程序搭建
微信运营
权威媒体发布