网站建设的意义以及重要性,重庆网站维护,织梦二次开发手机网站,小程序官方开发文档#x1f48c; 所属专栏#xff1a;【微信小程序开发教程】 #x1f600; 作 者#xff1a;我是夜阑的狗#x1f436; #x1f680; 个人简介#xff1a;一个正在努力学技术的CV工程师#xff0c;专注基础和实战分享 #xff0c;欢迎咨询#xff01; … 所属专栏【微信小程序开发教程】 作 者我是夜阑的狗 个人简介一个正在努力学技术的CV工程师专注基础和实战分享 欢迎咨询 欢迎大家这里是CSDN我总结知识的地方喜欢的话请三连有问题请私信 文章目录前言一、全局配置 -- tabBar1、什么是 tabBar2、tabBar 的 6 个组成部分3、tabBar 节点的配置项二、配置 tabBar1. 需求描述2. 实现步骤总结前言 大家好又见面了我是夜阑的狗本文是专栏【微信小程序开发教程】专栏的第17篇文章; 今天开始学习微信小程序的第九天开启新的征程记录最美好的时刻每天进步一点点。 专栏地址【微信小程序开发教程】 此专栏是我是夜阑的狗微信小程序开发过程的总结希望能够加深自己的印象以及帮助到其他的小伙伴。 如果文章有什么需要改进的地方还请大佬不吝赐教。 一、全局配置 – tabBar 前面已经学习完了全局配置–window通过栗子了解到如何修改导航栏、下拉刷新和上拉触底。接下来就来讲解一下全局配置另外一个配置项–tabBar。话不多说让我们原文再续书接上回吧。 1、什么是 tabBar tabBar 是移动端应用常见的页面效果用于实现多页面的快速切换。小程序中通常将其分为 底部 tabBar 顶部 tabBar 注意 tabBar中只能配置最少 2 个、最多 5 个 tab 页签当渲染顶部 tabBar 时不显示 icon只显示文本
2、tabBar 的 6 个组成部分 接下来将对 tabBar 的 6 个部分进行学习,如下图所示 backgroundColortabBar 的背景色selectedIconPath选中时的图片路径borderStyletabBar 上边框的颜色iconPath未选中时的图片路径selectedColortab 上的文字选中时的颜色colortab 上文字的默认未选中颜色
3、tabBar 节点的配置项 接下来介绍 tabBar 的基本属性在 官方文档 中除了 borderStyleposition 属性之外其他都是必填属性不过只是为了做测试的话只有 list 属性是必填的如下表所示
属性类型必填默认值说明colorHexColor是tab 上的文字默认颜色仅支持十六进制颜色selectedColorHexColor是tab 上的文字选中时的颜色仅支持十六进制颜色backgroundColorHexColor是tab 的背景色仅支持十六进制颜色borderStylestring否blacktabbar 上边 框的颜色 仅支持 black / whitelistArray是tab 的列表详见 list 属性说明 最少 2 个、最多 5 个 tabpositionstring否bottomtabBar 的位置仅支持 bottom / top其中 list 接受一个数组只能配置最少 2 个、最多 5 个 tab。tab 按数组的顺序排序每个项都是一个对象其属性值如下
属性类型必填说明pagePathstring是页面路径必须在 pages 中先定义textstring是tab 上按钮文字iconPathstring否图片路径icon 大小限制为 40kb建议尺寸为 81px * 81px不支持网络图片。当 position 为 top 时不显示 icon。selectedIconPathstring否选中时的图片路径icon 大小限制为 40kb建议尺寸为 81px * 81px不支持网络图片。当 position 为 top 时不显示 icon。如果在小程序中配置 tabBar 效果需要打开 app.json 文件创建与 pages 和 window 同级的节点在里面添加需要的属性具体代码如下所示
app.json
{tabBar: {list: [{pagePath: pages/cshPageTab/cshPageTab,text: Tab},{pagePath: pages/cshPageButton/cshPageButton,text: Button},{pagePath: pages/cshPageData/cshPageData,text: Data}]},
}创建了三个tab进行显示并没有对其他属性进行设置比较简洁来看一下实际显示效果 二、配置 tabBar 前面简单的配置tabBar成功实现跳转但是样式比较简陋。接下来完整配置一下 tabBar。
1. 需求描述 根据前面的栗子在此基础对tabBar进行优化成以下页面。 2. 实现步骤 在实际开发过程中完成配置 tabBar 可分为三步
Step 1、拷贝图标资源 把下载好的 images 资源拷贝到小程序项目根目录中将需要用到的小图标分为 3 组每组两个其中 1图片名称中包含 -active 的是选中之后的图标。 2图片名称中不包含 -active 的是默认图标。 如下图所示 Step 2、新建 3 个对应的 tab 页面 通过 app.json 文件的 pages 节点快速新建 3 个对应的 tab 页面这里为了方便使用前面栗子的三个页面示例代码如下
app.json
{pages:[pages/cshPageTab/cshPageTab,pages/cshPageData/cshPageData,pages/cshPageButton/cshPageButton,pages/index/index,pages/logs/logs],
}其中cshPageTab 是首页cshPageData 是消息页面cshPageButton 是联系我们页面。 注意tab页签对应页面必须放在 pages 页面数组最开始的位置不能往后放否则无法生效。
Step 3、配置 tabBar 选项 首先打开 app.json 配置文件和 pages、window 平级新增 tabBar 节点其次 tabBar 节点中新增 list 数组这个数组中存放的是每个 tab 项的配置对象最后在 list 数组中新增每一个 tab 项的配置对象。对象中包含的属性如下 1 pagePath 指定当前 tab 对应的页面路径【必填】 2 text 指定当前 tab 上按钮的文字【必填】 3 iconPath 指定当前 tab 未选中时候的图片路径【可选】 4 selectedIconPath 指定当前 tab 被选中后高亮的图片路径【可选】 为了页面的美观性这四个都要进行设置。具体代码如下所示
app.json
{tabBar: {list: [{pagePath: pages/cshPageTab/cshPageTab,text: Tab,iconPath: /images/home.png,selectedIconPath: /images/home-active.png},{pagePath: pages/cshPageButton/cshPageButton,text: Button,iconPath: /images/message.png,selectedIconPath: /images/message-active.png},{pagePath: pages/cshPageData/cshPageData,text: Data,iconPath: /images/contact.png,selectedIconPath: /images/contact-active.png}]},
}到这里就完成完整的 tabBar 配置来看下实际效果 总结 感谢观看这里就是全局配置 – tabBar的介绍使用如果觉得有帮助请给文章点个赞吧让更多的人看到。 也欢迎你关注我。 原创不易还希望各位大佬支持一下你们的点赞、收藏和留言对我真的很重要 最后本文仍有许多不足之处欢迎各位认真读完文章的小伙伴们随时私信交流、批评指正下期再见。 更多专栏订阅: 【LeetCode题解持续更新中】 【Java Web项目构建过程】 【微信小程序开发教程】⚽ 【JavaScript随手笔记】 【大数据学习笔记华为云】 【程序错误解决方法建议收藏】 【软件安装教程】 订阅更多你们将会看到更多的优质内容
