0
点赞
收藏
分享

微信扫一扫

uniapp 创建与配置 tabbar


uniapp 创建与配置 tabbar_编译报错


uniapp 创建与配置 tabbar_ico_02

1. 创建页面
  1. 删除​​pages​​ 下的 ​​index​​ 文件夹
  2. uniapp 创建与配置 tabbar_tabbar_03

  3. 在​​pages​​ 文件夹处,右键 -> 选择新建页面
  4. uniapp 创建与配置 tabbar_ico_04

  5. 确认新建页面的信息
  6. uniapp 创建与配置 tabbar_编译报错_05

  7. 由于咱们删除了默认的index.vue页面,导致编译报错
  8. uniapp 创建与配置 tabbar_tabbar_06

  9. 找到pages.json文件,把鼠标选中部分配置删除即可
  10. uniapp 创建与配置 tabbar_tabbar_07

2. 配置 ​​pages.json​
  1. 删除​​index​​ 路径(这一步咱们上面已经做了)
  2. 新建​​tabbar​​ 节点
  3. 复制图标资源 文件夹下 ​​tab-icons​​ 文件夹到 ​​static​​ 文件夹中
    这个需要自己去图标网站下载
    推荐使用阿里图标库
    ​​https://www.iconfont.cn/​​
  4. uniapp 创建与配置 tabbar_编译报错

3. 依次创建me和record页面

uniapp 创建与配置 tabbar_ico_09

uniapp 创建与配置 tabbar_tabbar_10


uniapp 创建与配置 tabbar_tabbar_11

4. 案例源码

最终代码如下:

{
"pages": [
{
"path" : "pages/index/index",
"style" :
{
"navigationBarTitleText": "",
"enablePullDownRefresh": false
}

},
{
"path" : "pages/me/me",
"style" :
{
"navigationBarTitleText": "",
"enablePullDownRefresh": false
}

}
,{
"path" : "pages/record/record",
"style" :
{
"navigationBarTitleText": "",
"enablePullDownRefresh": false
}

}

],
"globalStyle": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "uni-app",
"navigationBarBackgroundColor": "#F8F8F8",
"backgroundColor": "#F8F8F8",
"app-plus": {
"background": "#efeff4"
}
},
"tabBar": {
"selectedColor": "#1296db",
"list": [
{
"pagePath": "pages/index/index",
"text": "主页",
"iconPath": "static/tab-icons/index.png",
"selectedIconPath": "static/tab-icons/index-active.png"
},
{
"pagePath": "pages/record/record",
"text": "记录",
"iconPath": "static/tab-icons/record.png",
"selectedIconPath": "static/tab-icons/record-active.png"
},
{
"pagePath": "pages/me/me",
"text": "我的",
"iconPath": "static/tab-icons/me.png",
"selectedIconPath": "static/tab-icons/me-active.png"
}
]
}
}

5. 效果图

uniapp 创建与配置 tabbar_ico_12


uniapp 创建与配置 tabbar_tabbar_13


举报

相关推荐

0 条评论