• HBuilder X实现tabBar底部导航记录


    首先,打开uniapp官网,找到tarbar官方文档,仔细阅读,具体位置如下,全局配置下面的pages.json页面路由里面找到tabBar,点击查看:

     重点注意这两句话:

    找到文档我们就可以按照上面的提示去写代码了!

    首先我们需要使用HBuilder X创建一个项目,接着找到对应位置开始写代码

    📌第一步:在pages文件夹下创建一个tabbar文件夹,里面专门存放对应的tabbar导航页面,接着根据个人需要创建tab,数量最少2个,最多5个,如图所示,这里我创建了4个,每一个文件夹下面都创建了一个.vue文件来写页面代码

    📌第二步:找到pages.json文件,在和"pages"同级的位置写tabbar的配置代码,官方文档里面有示例代码参考以及属性说明

     创建了4个tab,所以我这边需要配置4个,代码如下:

    1. "tabBar": {
    2. // 文字未选中颜色
    3. "color": "#999",
    4. // 选中颜色
    5. "selectedColor": "#00b783",
    6. // 边框颜色
    7. "borderStyle": "#fff",
    8. // 背景颜色
    9. "backgroundColor": "#fff",
    10. // 配置tab页面
    11. "list": [{
    12. // 对应页面地址
    13. "pagePath": "pages/tabbar/index/index",
    14. // 显示文字
    15. "text": "首页",
    16. // 图标选中和未选中
    17. "iconPath": "static/index1.png",
    18. "selectedIconPath": "static/index2.png"
    19. }, {
    20. // 对应页面地址
    21. "pagePath": "pages/tabbar/classfiy/classfiy",
    22. // 显示文字
    23. "text": "分类",
    24. "iconPath": "static/class1.png",
    25. "selectedIconPath": "static/class2.png"
    26. }, {
    27. // 对应页面地址
    28. "pagePath": "pages/tabbar/study/study",
    29. // 显示文字
    30. "text": "学习",
    31. "iconPath": "static/study1.png",
    32. "selectedIconPath": "static/study2.png"
    33. }, {
    34. // 对应页面地址
    35. "pagePath": "pages/tabbar/mine/mine",
    36. // 显示文字
    37. "text": "我的",
    38. "iconPath": "static/my1.png",
    39. "selectedIconPath": "static/my2.png"
    40. }]
    41. }

     这里又有些朋友可能不知道去哪里找图标图片,这里可以去iconfont 阿里巴巴矢量图标库里面找自己需要的图标,下载下来使用,官网地址:https://www.iconfont.cn/

    图标下载具体步骤就是:

    1. 搜索图标
    2. 根据自己需要调整颜色
    3. 下载png格式到本地,然后直接使用就可以了

    📌第三步:还是在pages.json文件里面进行,我们需要把pages配置项数组里面的第一个对象设置成我们tabbar对应的第一个页面,如果这里不配置是不会显示tabbar导航条的,千万不要忘记了!

     第四步就是给每一个tabbar页面配置到"pages"里面,代码如下:

    1. "pages": [ //pages数组中第一项表示应用启动页,参考:https://uniapp.dcloud.io/collocation/pages
    2. {
    3. "path": "pages/tabbar/index/index",
    4. "style": {
    5. // 首页不需要可不配置
    6. // "navigationBarTitleText": "首页",
    7. "enablePullDownRefresh": false,
    8. "navigationStyle": "custom"
    9. }
    10. }, {
    11. "path": "pages/tabbar/classfiy/classfiy",
    12. "style": {
    13. // 顶部导航栏标题文字内容
    14. "navigationBarTitleText": "分类",
    15. // 顶部导航栏背景颜色
    16. "navigationBarBackgroundColor": "#8ef400",
    17. // 顶部导航栏标题文字颜色
    18. "navigationBarTextStyle": "white",
    19. // 是否开启下拉刷新
    20. "enablePullDownRefresh": false
    21. }
    22. }, {
    23. "path": "pages/tabbar/study/study",
    24. "style": {
    25. "navigationBarTitleText": "学习",
    26. "navigationBarBackgroundColor": "#8ef400",
    27. "navigationBarTextStyle": "white",
    28. "enablePullDownRefresh": false
    29. }
    30. }, {
    31. "path": "pages/tabbar/mine/mine",
    32. "style": {
    33. "navigationBarTitleText": "我的",
    34. "navigationBarBackgroundColor": "#8ef400",
    35. "navigationBarTextStyle": "white",
    36. "enablePullDownRefresh": false
    37. }
    38. }
    39. ],

     最终做出了的导航条效果就像这样子下面这个样子:

     顶部导航栏标题就像下面这个样子啦

     

     到这里就结束啦,浅浅记录一下!

  • 相关阅读:
    ASEMI肖特基二极管SBT40100VFCT规格,SBT40100VFCT封装
    【每日练习】进制转化
    使用ollama分别在我的window、mac、小米手机上部署体验llama3-8b
    如何获取第三方maven依赖信息?
    Vue脚手架项目结构分析
    【Go ~ 0到1 】 第七天 获取时间戳,时间比较,时间格式转换,Sleep与定时器
    7-2 时间换算
    1011 循环神经网络 RNN
    docker部署lnmp环境
    150:vue+openlayers 多边形拐点用不同形状表示(圆形、三角形、矩形、正方形、星形...)
  • 原文地址:https://blog.csdn.net/m0_61843874/article/details/128088046