微信小程序之底部导航栏——tabBar
来源:互联网 发布:如何注册淘宝联盟账号 编辑:程序博客网 时间:2024/06/05 10:23
微信的开发文档里有,很多人也写了,自己写一遍,加深印象罢!
在学习Android的时候,被模仿一个app的界面,实现其UI。而一般来说,总是避免不了导航栏的。
比较大众化的,就是底部导航栏啦,而实现的方式也是非常的多,如:Fragment+ViewPage Or 来一个RadioGroup Or 以前的TabHost 等~
效果,是一样或差不多的,而实现手法,是五花八门特色鲜明的!
在微信小程序中,可以说是,一统江山了吧,扔出了一个tabBar~
emmm..没错,你需要做的是:找一个漂亮的图片,给一个导航名,然后选个好看的颜色,再一一对应即可。
就好比,之前学习Android的时候,学的是手动挡的车。现在接触微信小程序,就好比开着自动挡的车~
那效果是怎么样的呢?
先建两个目录,待会我们跳转用!
在app.json中,别忘了要添加目录!
好,干正事!
"tabBar": { "list": [{ "pagePath": "pagePath", "text": "text", "iconPath": "iconPath", "selectedIconPath": "selectedIconPath" }] }
emmm...这里“list”里,现在只有一个标签的内容,我们来三个吧!
差点忘了我们要放图标~那怎么把图片放进来呢?
在目录里建立文件夹,然后放入图片,开发工具就会自动更新了,关于图标,可以直接去网上搜 阿里巴巴图标库 ,丰富的图标供你下载!
补全代码:
"tabBar": { "list": [{ "pagePath": "pages/index/index", "text": "微笑", "iconPath": "pages/index/img/Smile.png", "selectedIconPath": "pages/index/img/Smile_select.png" }, { "pagePath": "pages/tabOne/tabOne", "text": "购物车", "iconPath": "pages/index/img/cart.png", "selectedIconPath": "pages/index/img/cart_select.png" }, { "pagePath": "pages/tabTwo/tabTwo", "text": "所有", "iconPath": "pages/index/img/all.png", "selectedIconPath": "pages/index/img/all_select.png" }] }正如刚刚的图:
不过好像字木有变化哦!
还要添加一行代码!
就完成啦!
即使是自动挡的车,那不仅仅要会打方向、踩油门,还要了解每个按钮的作用,这样开起车来,才更得心应手!
“菜是原罪!”
学习,需要再加把劲!
阅读全文
0 0
- 微信小程序之底部导航栏——tabBar
- 微信小程序—tabBar底部导航中文注解api
- 微信小程序底部导航Tabbar
- 微信小程序tabBar底部导航栏菜单详细介绍
- 微信小程序把玩(三)tabBar底部导航
- 微信小程序tabBar底部导航 不显示问题解析
- 微信小程序tabBar底部导航中文注解api
- 微信小程序tabBar底部导航中文注解api
- 小程序tabBar底部导航详细介绍
- 微信小程序之底部导航栏(一)
- 微信小程序入门四: 导航栏样式、tabBar导航栏
- 微信小程序-导航栏样式、tabBar导航栏
- 小程序底部tabBar导航配置(app.json)
- 微信小程序如何实现底部导航栏
- 微信小程序底部tabbar不显示问题
- 微信小程序之仿android fragment之可滑动的底部导航栏实例 —— 微信小程序实战系列(4)
- 微信小程序tabBar的使用,导航栏实例
- Swift UI专项训练34 TabBar底部导航栏
- java字符串Emoji表情的处理
- springIOC原理
- 【Unity编程】Unity动画系统(二)
- ionic环境设置
- Java的多线程机制:缓存一致性和CAS
- 微信小程序之底部导航栏——tabBar
- 历届试题 PREV-33 兰顿蚂蚁
- CUDA 学习优化思路
- hihoCoder
- window 安装多个mysql实例
- 快讯 | Java 9 正式发布,新特性解读
- Unity_设计模式_有限状态机_010
- 介绍一款基于MVEL简单规则引擎
- 历届试题 PREV-34 矩阵翻硬币