微信小程序实战篇-电商(一)

我想大家对电商一定不陌生,一般电商的底部导航栏有以下几个首页、分类、购物车、个人中心。所以我们按照这个来做吧。

app.json是用来配置page路径以及导航栏属性的,那我们要做首页、分类、购物车、个人中心界面就要在page也添加这几个界面,所以在app.json的page里添加如下代码,写入page路径,系统会自动帮你创建界面的。

微信小程序实战篇-电商(一)

好,既然添加了四个界面,那我们要怎么做底部导航栏呐,今天给app.json再添加一个属性,就是可以在app.json里配置导航栏,将下面代码添加到app.json里面

"tabBar": { "color":"#858585", "selectedColor": "#f0145a", "backgroundColor": "#ffffff", "borderStyle": "#000", "list": [{ "pagePath": "pages/home/home", "text": "首页", "iconPath": "resources/images/home.png", "selectedIconPath": "resources/images/home_select.png" },{ "pagePath": "pages/classify/classify", "text": "分类", "iconPath": "resources/images/classify.png", "selectedIconPath": "resources/images/classify_select.png" }, { "pagePath": "pages/cart/cart", "text": "购物车", "iconPath": "resources/images/cart.png", "selectedIconPath": "resources/images/cart_select.png" }, { "pagePath": "pages/mine/mine", "text": "我的", "iconPath": "resources/images/mine.png", "selectedIconPath": "resources/images/mine_select.png" }] }

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/zgfxps.html