自己不努力,没人会帮你

小程序很常见的底部tabbar按钮该如何设置呢？

Tabbar 1. 创建页面2. 配置tabbar3. tabbar样式修改

1. 创建页面

目录如下：

pages - index / index.vue - mine / mine.vue 2. 配置tabbar

需要配置的文件：pages.json 配置代码块：

"pages" : [ // 这里是路由配置 ], "tabBar": { // 这里就是配置tabbar的地方 "color": "#8a8a8a", // 导航栏字体颜色 "selectedColor": "#d4237a", // 选中后字体的颜色 "borderStyle": "black", // 底部的border颜色，只能是“black”或者“white” "backgroundColor": "#ffffff", // 底部背景颜色 "list": [{ "pagePath": "pages/index/index", // 页面路径 "text": "首页", // 底部导航文字, "iconPath": "static/logo.png", // 没选中前的图标路径 "selectedIconPath": "static/logo.png" // 选中后的图标路径 }, { "pagePath": "pages/mine/mine", "text": "我的", "iconPath": "static/logo.png", "selectedIconPath": "static/logo.png" } ] }

效果图：

3. tabbar样式修改

修改文件：App.vue全局样式添加

.uni-tabbar { // tab 样式 // 背景色 background-color: rgba(57, 181, 74, 0.1) !important; // tabBar 样式 // 上边框 .uni-tabbar-border { background-color: #e54d42 !important; // tabBar 上边框的颜色 } .uni-tabbar__item { // tabBar 单项样式 height: 100rpx !important; &:not(:last-child) { border-right: 4rpx solid #eee; } .uni-tabbar__icon { // tabBar 图标样式 width: 40rpx !important; height: 40rpx !important; } .uni-tabbar__label { // tabBar 文字样式 // color:yellow !important } } }

---

1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，会注明原创字样,如未注明都非原创，如有侵权请联系删除！；3.作者投稿可能会经我们编辑修改或补充；4.本站不提供任何储存功能只提供收集或者投稿人的网盘链接。