类似建站之星网站,wordpress做幻灯片,推广型的网站怎么做,做网站都需要买什么问题全局配置 - tabBar配置
tabBar 字段#xff1a;定义小程序顶部、底部 tab 栏#xff0c;用以实现页面之间的快速切换#xff1b;可以通过 tabBar 配置项指定 tab 栏的表现#xff0c;以及 tab 切换时显示的对应页面#xff1b; 在上面图中#xff0c;标注了一些 tabBar …全局配置 - tabBar配置
tabBar 字段定义小程序顶部、底部 tab 栏用以实现页面之间的快速切换可以通过 tabBar 配置项指定 tab 栏的表现以及 tab 切换时显示的对应页面 在上面图中标注了一些 tabBar 常用的配置项
borderStyle用来控制 tab 栏上方的一条边线控制边线是否需要进行演示或者隐藏backgroundColor用来配置整条 tab 栏的背景色selectedColor用来配置 tabBar 被激活时对应的文字颜色color用来配置 tabBar 没有被激活时文字的颜色listlist 是一个数组数组中每一项都是一个对象在对象中可以配置 selectedIconPath、pagePath、iconPath、textselectedIconPath 表示当对应的 tabBar 被激活时对应 icon 的路径pagePath 表示当对应的 tabBar 被激活时需要跳转的页面路径iconPath 用来配置当前 tabBar 没有被激活时对应 icon 的路径text 用来定义每个 tabBar 对应的文字是什么
注意事项tab 按数组的顺序排序。list 配置最少配置 2 个最多 5 个可以通过官方文档tabBar 配置项来学习进行相关配置
打开微信开发者工具选择根目录下的 app.json 文件由于 tabBar 主要用于页面间的切换这里我们现在 pages 字段中创建好对应的页面信息 app.json 中的 tabBar 字段和 pages 字段是同级的所以在 app.json 中添加这个字段
tabBar: {selectedColor: #f3514f,color: #666,borderStyle:black,position: bottom,list: [{pagePath: pages/index/index,text: 首页,iconPath: /assets/tabbar/index.png,selectedIconPath: /assets/tabbar/index-active.png},{pagePath: pages/cate/cate,text: 分类,iconPath: /assets/tabbar/cate.png,selectedIconPath: /assets/tabbar/cate-active.png},{pagePath: pages/cart/cart,text: 购物车,iconPath: /assets/tabbar/cart.png,selectedIconPath: /assets/tabbar/cart-active.png},{pagePath: pages/profile/profile,text: 我的,iconPath: /assets/tabbar/profile.png,selectedIconPath: /assets/tabbar/profile-active.png}]}这里 tabbar 需要使用一些图片资源可以从 GitCode 中下载相关图片资源图片资源来自尚硅谷侵权删除无意冒犯下载后的图片资源放置在根目录的 assets 文件夹中路径地址为 ./assets/tabbar/具体如下 参考视频尚硅谷微信小程序开发教程
