【013】底部导航开发

官方文档 https://uniapp.dcloud.io/collocation/pages?id=tabbar

具体在pages.json文件中的tabBar里设置

{"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages{"path" : "pages/demo/demo","style" : {}},{"path": "pages/index/index","style": {"navigationBarTitleText": "仿糗事百科"}},{"path" : "pages/ceshi/ceshi","style" : {}},{"path" : "pages/news/news","style" : {}},{"path" : "pages/paper/paper","style" : {}},{"path" : "pages/home/home","style" : {}}],"globalStyle": {"navigationBarTextStyle": "black","navigationBarTitleText": "仿糗事百科","navigationBarBackgroundColor": "#F8F8F8","backgroundColor": "#F8F8F8"},"tabBar": {"color":"#adadad",         // 导航栏文字默认颜色"selectedColor":"#fee42a", // 导航栏选中颜色"backgroundColor":"#fff",  // 导航栏背景颜色"borderStyle":"white",     // 导航栏边框样式"list":[                   // tab的列表{"pagePath":"pages/index/index",                  // 导航栏对应页面路径（不用写.vue）"text":"糗事",                                   // 导航栏文字"iconPath":"static/tabbar/index.png",           // 导航栏未选中的图标路径"selectedIconPath":"static/tabbar/indexed.png"  // 导航栏已选中的图标路径},{"pagePath":"pages/news/news","text":"动态","iconPath":"static/tabbar/news.png","selectedIconPath":"static/tabbar/newsed.png"},{"pagePath":"pages/paper/paper","text":"小纸条","iconPath":"static/tabbar/paper.png","selectedIconPath":"static/tabbar/papered.png"},{"pagePath":"pages/home/home","text":"我的","iconPath":"static/tabbar/home.png","selectedIconPath":"static/tabbar/homed.png"}]}
}

前端开发~uni-app ·[项目-仿糗事百科] 学习笔记 ·006【底部导航开发】相关推荐

前端开发~uni-app ·[项目-仿糗事百科] 学习笔记 ·008【首页开发】
注:前言.目录见 https://god-excious.blog.csdn.net/article/details/105312456 文章目录 [024]page-json配置 [025]图文.视 ...
前端开发~uni-app ·[项目-仿糗事百科] 学习笔记 ·000【前言】
前言本系列笔记,基于曾经的网易云课堂上一个"uni-app仿糗事百科"开发的课程,课程的资源来自网络. 我仅做一些笔记,来记录学习的一些收获. 前8节课讲的都是一些软件的基础使用 ...
前端开发~uni-app ·[项目-仿糗事百科] 学习笔记 ·005【设置全局属性globalStyle】
注:前言.目录见 https://god-excious.blog.csdn.net/article/details/105312456 文章目录 [012]设置全局样式globestyle [012 ...
前端开发~uni-app ·[项目-仿糗事百科] 学习笔记 ·009【搜索页开发】
注:前言.目录见 https://god-excious.blog.csdn.net/article/details/105312456 文章目录 [035]搜索页开发(上) 开发内容具体方法核心 ...
前端开发~uni-app ·[项目-仿糗事百科] 学习笔记 ·004【App.vue引入全局公共样式】
注:前言.目录见 https://god-excious.blog.csdn.net/article/details/105312456 文章目录 [009]引入官方CSS样式库 [010]引入第三方 ...
前端开发~uni-app ·[项目-仿糗事百科] 学习笔记 ·007【uni-app和vue.js基础快速上手】
注:前言.目录见 https://god-excious.blog.csdn.net/article/details/105312456 文章目录 [014]view和text组件和动画使用常见的尺 ...
高仿糗事百科学习(三)NET
高仿糗事百科,是一个典型的cs模式,所以我们获取数据就要通过net,今天我就开始书写关于网络连接方面的书写. 在安卓中,我们将联网请求往往是放在次线程中,如果放在主线程中,将会导致主线程要处理事件太多 ...
uniapp实战项目仿糗事百科_项目设计最好用的底层思考模型——黄金圈
为什么要学习黄金圈法则如何学习黄金圈法则学习黄金圈法则哪些内容彩蛋全文共计2200字,10张图片I阅读13分钟为什么要学习黄金圈法则在工作中和生活中,你是否遇到过以下的困惑: 1-老板突然 ...
最新uni-app实战仿糗事百科app开发教程完整版
课程概述: 本季度为uni-app实战项目第一季度,将实战开发仿糗事百科app,其中会包括发布到安卓端app,IOS端app.微信小程序和支付宝小程序. 章节1项目介绍(买前必看) 课时1项目介绍(买 ...

前端开发~uni-app ·[项目-仿糗事百科] 学习笔记 ·006【底部导航开发】

文章目录

【013】底部导航开发

前端开发~uni-app ·[项目-仿糗事百科] 学习笔记 ·006【底部导航开发】相关推荐

最新文章

热门文章