202206-23|微信小程序-TabBar用法

举报
写程序的小王叔叔 发表于 2022/06/21 12:21:36 2022/06/21
【摘要】 主页：小王叔叔的博客支持:点赞👍关注✔️收藏💖​​​​​​​​如何搭建多选面板（HH自己理解）：tabBar的用法？？？tabBar用法：1，打开微信小程序的开发工具：微信web开发者工具，创建自己的小程序的项目2，目录结构中，找到app.json文件，在page中输入tabBar的相关代码，及在整体文件夹下，按照MVC分层模式，创建微信小程序的代码结构文件夹，并存放tabBar中所需要...

主页：小王叔叔的博客

支持:点赞👍关注✔️收藏💖​

​​​​​​​如何搭建多选面板（HH自己理解）：tabBar的用法？？？

tabBar用法：

1，打开微信小程序的开发工具：微信web开发者工具，创建自己的小程序的项目

2，目录结构中，找到app.json文件，在page中输入tabBar的相关代码，及在整体文件夹下，按照MVC分层模式，创建微信小程序的代码结构文件夹，并存放

tabBar中所需要的图片（.png/.jpg/...）

我的分层如下：..\pages\images\tabbars -->存放tabBar的图片

3，在app.json中写入tabBar的代码，我的代码如下：

"tabBar": {
"index":"-1",
"color": "#ccc",
"selectedColor": "#35495e",
"borderStyle": "white",
"backgroundColor": "#f9f9f9",
"list": [
{
"text": "首页",
"pagePath": "pages/work/workindex",
"iconPath": "pages/images/tabbars/home.png",
"selectedIconPath": "pages/images/tabbars/home_active.png"
},
{
"text": "通讯录",
"pagePath": "pages/logs/logs",
"iconPath": "pages/images/tabbars/telbill.png",
"selectedIconPath": "pages/images/tabbars/telbill_active.png"
},
{
"text": "我的",
"pagePath": "pages/logs/logs",
"iconPath": "pages/images/tabbars/mine.png",
"selectedIconPath": "pages/images/tabbars/mine_active.png"
}
]
}

以上为tabBar的代码

4，在tabBar中涉及的图片在网上就可以找到，我是在：【http://www.iconfont.cn/collections/index?spm=a313x.7781069.1998910419.3】

里面找到的，一起分享下。

5，这就是tabBar的代码，然后在工具中“预览”下，看看效果。

转载声明：本文为博主原创文章，未经博主允许不得转载

⚠️注意 ~

💯本期内容就结束了，如果内容有误，麻烦大家评论区指出！

如有疑问❓可以在评论区💬或私信💬，尽我最大能力🏃‍♀️帮大家解决👨‍🏫！

如果我的文章有帮助到您，欢迎点赞+关注✔️鼓励博主🏃，您的鼓励是我分享的动力🏃🏃🏃~

​

【版权声明】本文为华为云社区用户原创内容，未经允许不得转载，如需转载请自行联系原作者进行授权。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱： cloudbbs@huaweicloud.com
Image JavaScript jQuery 小程序
  • 点赞
  • 收藏
  • 关注作者

评论（0）

0/1000
抱歉，系统识别当前为高风险访问，暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称，即可参与社区互动！

*长度不超过10个汉字或20个英文字符，设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符，设置后3个月内不可修改。

确认 取消

加入云驻计划，成为创作者

  • 华为云周边好礼
  • 免费体验产品
  • 特殊身份标识
  • 线下官方门票
  • 内部专家零距离
  • 与10000+优质创作者共同成长
立即加入