【微信小程序】tabBar的使用

微信小程序-tabBar的使用

1.tabBar的属性

tabBar 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页面

属性	描述
color	tab 上的文字默认颜色，仅支持十六进制颜色
selectedColor	tab上的文字选中时的颜色，仅支持十六进制颜色
backgroundColor	tab的背景色，仅支持十六进制颜色
borderStyle	tabbar上边框的颜色，仅支持 black / white
position	tabBar 的位置，仅支持 bottom / top
custom	自定义 tabBar
list	tab 的列表，详见 list 属性说明，最少 2 个、最多 5 个 tab

2.list的属性

ist 接受一个数组，只能配置最少 2 个、最多 5 个 tab

属性	说明
pagePath	页面路径，必须在 pages 中先定义
text	上按钮文字
iconPath	图片路径
selectedIconPath	选中时的图片路径

注意点：

1.list 的页面路径(pagePath)必须要先在pages中定义

2.list中第一个tab的页面路径(pagePath)要放pages的第一位，否则不显示

3.tabBar的位置(position)是有上下发布，bottom下/top上；默认是bottom，而且选择了top图标不会显示

4.顺便说说pages，哪个页面排第一便先展示那个页面

比如代码优先展示"pages/index/index"

3.代码与图片展示

{"pages":["pages/index/index","pages/logs/logs","pages/zero/1/1","pages/zero/2/1","pages/zero/main/mian"],"window":{"backgroundTextStyle":"dark","navigationBarBackgroundColor": "#FFC0CB","navigationBarTitleText": "小天气","navigationBarTextStyle":"black","enablePullDownRefresh": true,"backgroundColor": "#FFF0F5"},"tabBar": {"list": [{"pagePath": "pages/index/index","text": "太阳","iconPath": "icon1/1.jpg","selectedIconPath": "icon1/2.jpg"},{"pagePath": "pages/zero/1/1","text": "下雪","iconPath": "icon1/3.jpg","selectedIconPath": "icon1/4.jpg"},{"pagePath": "pages/zero/2/1","text": "下雨","iconPath": "icon1/5.jpg","selectedIconPath": "icon1/6.jpg"},{"pagePath": "pages/zero/main/mian","text": "彩虹","iconPath": "icon1/7.jpg","selectedIconPath": "icon1/8.jpg"}]},"style": "v2","sitemapLocation": "sitemap.json"
}

希望我这周的学习报告对你有帮助！

【微信小程序】tabBar的使用相关推荐

自定义微信小程序tabBar，兼容iPhone异形全面屏
需求开发微信商城会员中心,tabBar有首页及用户中心,当用户没有登录时点击页面任意位置均弹出登录窗口.但是自带的微信tabBar无法被弹出的遮罩层覆盖,从而可以在两个tab之间切换. 解决自己手 ...
微信自定义tabbar有小红点_自定义微信小程序tabBar组件上边框的颜色
背景: 在微信小程序的实际开发过程中,有时候我们需要修改微信小程序提供的 tabBar 组件顶部边框的颜色,以满足项目需求解决方案: 方式一: 通过tabBar组件自带的 borderStyle 属 ...
自定义微信小程序tabBar组件上边框的颜色
背景: 在微信小程序的实际开发过程中,有时候我们需要修改微信小程序提供的 tabBar 组件顶部边框的颜色,以满足项目需求解决方案: 方式一: 通过tabBar组件自带的 borderStyle 属 ...
【微信小程序】微信小程序tabBar使用中不显示问题
微信小程序中tabBar配置微信小程序中下方的tabBar如何配置很多刚刚接触小程序的同学,有些懵.这里给你一个详细的配置文档: 小程序配置 | 微信开放文档具体配置代码如下: "tab ...
微信小程序tabBar导航栏页和其他页执行onLoad与onShow时机；tabBar页获取不到参数问题；navigateTo跳转无效问题；onShow执行两次问题；
1.注意点: 只有五种情况会触发导航栏tabBar页的onLoad函数,分别是: –1.1:首次进入到导航栏tabBar页面: –1.2:从微信分享进入的导航栏tabBar页面: –1.3:识别二维码 ...
微信小程序uni.switchTab传参获取不到；小程序跳转到tabBar页并传参；uni-app微信小程序获取tabBar页面参数失败；uni-app微信小程序tabBar页面onLoad不执行
需求场景:从非tabBar页面B跳转到tabBar页面A,并想要携带参数. 如果使用uni.switchTab传参,会导致tabBAE页面获取不到参数: 原因: 官方文档有说,uni.switchTa ...
微信小程序——tabBar使用
如果小程序是一个多 tab 应用(客户端窗口的底部或顶部有 tab 栏可以切换页面),可以通过 tabBar 配置项指定 tab 栏的表现,以及 tab 切换时显示的对应页面. 其中 list 接受一 ...
微信小程序tabBar改变图片大小方法
1.最少用,但是最简单,用原生tabBar用ps改变图片大小 2.用原生提供的custom-tab-bar(可能会存在一些小问题,比如switchTab的跳转之类的) 3.自定义组件,把所有页面变成子 ...
微信小程序tabBar
实现效果图代码也很简单 1 在项目的app.json 中配置 "tabBar": {"color": "#6e6d6b","se ...
微信小程序tabBar不显示的问题描述解决
app.json中配置tabBar,list菜单列表如下: app.json的pages配置如下: 结果页面渲染的时候,并没有显示菜单. 问题出在,tabs的第一个页面的pagePath,在pages ...

【微信小程序】tabBar的使用

微信小程序-tabBar的使用

1.tabBar的属性

2.list的属性

注意点：

1.list 的页面路径(pagePath)必须要先在pages中定义

2.list中第一个tab的页面路径(pagePath)要放pages的第一位，否则不显示

3.tabBar的位置(position)是有上下发布，bottom下/top上；默认是bottom，而且选择了top图标不会显示

4.顺便说说pages，哪个页面排第一便先展示那个页面

3.代码与图片展示

【微信小程序】tabBar的使用相关推荐

最新文章

热门文章