微信小程序开发笔记—底部导航栏tabar

简介: 本文介绍了微信小程序开发中底部导航栏的设计方法,步骤详细,非常适合初学的小伙伴!


🎀 文章作者:二土电子
🐸 期待大家一起学习交流!


一、实现效果

首先展示一下实现效果
7c5f12a651bb25442e0096a9e96b541c_8772f0c7fa834ed993faf3f9de6679ef.png

底部导航栏有三个按键,图标自定义,中间为home键,两侧为个人空间,选中时的图标以及未选中时的图标均为自定义。

二、实现方法

1、准备图标

在小程序工程文件中新建一个文件夹image,里面用来存放按键选中以及未选中时的图标,如下图所示:
23541f78b9b5694612f33b0b5767daf9_8f5d79eab35b4470806730e3ee647ef1.png

相关图标可以到阿里巴巴矢量图库下载。
本文设计为,选中时图标变为彩色,未选中时图标为黑白,选中时和未选中时的图标都要准备,所以需要将下载的彩色图标转换为黑白图标,用来当作未选中时的图标。这里附上一个可以在线将彩色图片转换成黑白图片的网址:http://www.do.mo.cn/68/chs/app-image-gray/

2、app.json文件添加新页面

每一个页面都有自己相应的.json、.ts(.js)、.wxml和.wxss文件,在添加新页面时并不需要自己挨个创建,只需要在app.json中的pages下新添加页面并保存,即可自动创建好相关文件。这里我们新建三个页面,分别是home、lin和chen:

"pages": [
    "pages/home/home",
    "pages/lin/lin",
    "pages/chen/chen"
  ],

保存后在左侧的工程文件中会自动新建好上述相关文件,到此我们就创建好了三个页面。

3、app.json中添加tabar组件

先上代码

"tabBar": {
   
   
    "color": "#dddddd",
    "selectedColor": "#3cc51f",
    "borderStyle": "black",
    "backgroundColor": "#ffffff",
    "list": [
    {
   
   
      "pagePath": "pages/lin_enter/lin_enter",
      "iconPath": "image/lin.png",
      "selectedIconPath": "image/lin_selected.png",
      "text": "林"
    },
    {
   
   
      "pagePath": "pages/home/home",
      "iconPath": "image/home.png",
      "selectedIconPath": "image/home_selected.png",
      "text": "主页"
    },
  {
   
   
    "pagePath": "pages/chen_enter/chen_enter",
    "iconPath": "image/chen.png",
    "selectedIconPath": "image/chen_selected.png",
    "text": "陈"
  }
  ]
},
  • color:导航栏图标未选中时的文字颜色
  • selectedColor:导航栏图标选中时的文字颜色
  • borderStyle:导航栏边框颜色(black/white)
    设置成black会有黑色边框
  • backgroundColor:导航栏背景颜色
  • list:导航栏配置数组
    list中的元素最多5个,最少两个
  • pagePath:选中导航栏图标时显示的页面
  • iconPath:未选中时的图标路径
  • selectedIconPath:选中时的图标路径
  • text:图标下方文字内容
    图标路径就是上面创建的image文件夹中的文件

至此就完成了底部导航栏的设计。

三、注意事项

如果配置完未显示底部导航栏,可以先将list中的首个页面设置成与pages中的首个页面相同,保存后就会出现底部导航栏。如有需要,后续再调整list中页面的顺序导航栏也不会消失。

看到这里如果你也配置成功了记得给博主一个赞哟~如果没有成功记得留言讨论!

PS:本人也是初学微信小程序设计,有存在问题的地方还请各位大佬批评指正呀!

相关文章
|
10天前
|
自然语言处理 搜索推荐 小程序
微信公众号接口:解锁公众号开发的无限可能
微信公众号接口是微信官方提供的API,支持开发者通过编程与公众号交互,实现自动回复、消息管理、用户管理和数据分析等功能。本文深入探讨接口的定义、类型、优势及应用场景,如智能客服、内容分发、电商闭环等,并介绍开发流程和工具,帮助运营者提升用户体验和效率。未来,随着微信生态的发展,公众号接口将带来更多机遇,如小程序融合、AI应用等。
|
21天前
|
人工智能 开发框架 机器人
AstrBot:轻松将大模型接入QQ、微信等消息平台,打造多功能AI聊天机器人的开发框架,附详细教程
AstrBot 是一个开源的多平台聊天机器人及开发框架,支持多种大语言模型和消息平台,具备多轮对话、语音转文字等功能。
2784 15
AstrBot:轻松将大模型接入QQ、微信等消息平台,打造多功能AI聊天机器人的开发框架,附详细教程
|
3天前
|
人工智能 自然语言处理 小程序
用户说 | 文科生的我用DeepSeek+AI程序员半小时开发了一个小程序
用户说 | 文科生的我用DeepSeek+AI程序员半小时开发了一个小程序
用户说 | 文科生的我用DeepSeek+AI程序员半小时开发了一个小程序
|
5天前
|
JSON 缓存 小程序
微信小程序组件封装与复用:提升开发效率
本文深入探讨了微信小程序的组件封装与复用,涵盖组件的意义、创建步骤、属性与事件处理,并通过自定义弹窗组件的案例详细说明。组件封装能提高代码复用性、开发效率和可维护性,确保UI一致性。掌握这些技能有助于构建更高质量的小程序。
|
2月前
|
JSON 小程序 JavaScript
原生微信小程序笔记完整总结
原生微信小程序笔记完整总结
54 1
|
2月前
|
小程序 IDE PHP
圈子源码如何打包生成App小程序/开发一个圈子系统软件所需要的费用体现在哪里?
将PHP源码打包成App的过程涉及多个步骤和技术选择。以圈子源码为例,首先明确需求,确定App功能和目标用户群体,并根据需求开发小程序页面,如用户注册、圈子列表等。源码准备阶段确保源码适用于小程序开发,环境配置需安装IDE(如微信开发者工具)及依赖库。最后在IDE中打包小程序并上传至管理平台,通过审核后发布。费用方面,模板开发成本较低,定制开发则更高,具体取决于需求复杂度和第三方服务费用。
84 0
|
2月前
|
移动开发 小程序
thinkphp+uniapp开发的多端商城系统源码/H5/小程序/APP支持DIY模板直播分销
thinkphp+uniapp开发的多端商城系统源码/H5/小程序/APP支持DIY模板直播分销
41 0
|
5月前
|
JSON 小程序 JavaScript
uni-app开发微信小程序的报错[渲染层错误]排查及解决
uni-app开发微信小程序的报错[渲染层错误]排查及解决
1026 7
|
5月前
|
小程序 JavaScript 前端开发
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
961 1
|
5月前
|
小程序 前端开发 测试技术
微信小程序的开发完整流程是什么?
微信小程序的开发完整流程是什么?
314 7

热门文章

最新文章