700字范文,内容丰富有趣,生活中的好帮手!
700字范文 > 微信小程序之底部导航栏——tabBar

微信小程序之底部导航栏——tabBar

时间:2021-03-02 01:46:33

相关推荐

微信小程序之底部导航栏——tabBar

微信的开发文档里有,很多人也写了,自己写一遍,加深印象罢!

在学习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"}]}

正如刚刚的图:

不过好像字木有变化哦!

还要添加一行代码!

就完成啦!

即使是自动挡的车,那不仅仅要会打方向、踩油门,还要了解每个按钮的作用,这样开起车来,才更得心应手!

“菜是原罪!”

学习,需要再加把劲!

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。