uniapp中底部tabbar设置"/>
uniapp中底部tabbar设置
一、目的:设置底部tabbar
二、设置tabbar
在page.json文件下进行配置
tabbar与pages、globalStyle等同级书写
color:默认文字颜色
selectedColor:选中的文字颜色
list是数组,里面的tabbar至少2个至多5个
pagepath:页面的路径
iconPath:默认图标路径
selectedIconPath选中的图标路径
text文字的内容
三、代码展示:
代码:
"tabBar": {"color": "#000000","selectedColor": "D81E06","list": [{"pagePath": "pages/index/index","iconPath": "static/tabbar/home.png","selectedIconPath": "static/tabbar/home-active.png","text": "消息"},{"pagePath": "pages/list/list","iconPath": "static/tabbar/cate.png","selectedIconPath": "static/tabbar/cate-active.png","text": "列表"},{"pagePath": "pages/shopCart/shopCart","iconPath": "static/tabbar/cart.png","selectedIconPath": "static/tabbar/cart-active.png","text": "购物车"},{"pagePath": "pages/my/my","iconPath": "static/tabbar/my.png","selectedIconPath": "static/tabbar/my-active.png","text": "我的"}]
},
四、结果展示:
五、具体配置项分享:
见官网展示:
.html#tabbar
更多推荐
uniapp中底部tabbar设置
发布评论