1、找到项目根目录的配置文件 app.json,在配置文件中加入配置代码。例如:

 "tabBar": {  <!--底部的导航配置属性-->
"color": "为选择时底部导航栏的颜色",
"selectedColor": "选中时底部导航栏的颜色",
"borderStyle":"底部导航栏边框样式",
"list": [{ <!--导航配置数组-->
"selectedIconPath": "选中时的图片路径",
"iconPath": "未选中时的图片路径",
"pagePath": "页面访问地址",
"text": "首页"
}, {
"selectedIconPath": "选中时的图片路径",
"iconPath": "未选中时的图片路径",
"pagePath": "页面访问地址",
"text": "会员"
}, {
"selectedIconPath": "选中时的图片路径",
"iconPath": "未选中时的图片路径",
"pagePath": "页面访问地址",
"text": "订单"
}]
},

具体可参考微信小程序官方文档。https://mp.weixin.qq.com/debug/wxadoc/dev/framework/config.html

微信小程序底部菜单栏的使用方法的更多相关文章

  1. 微信小程序底部实现自定义动态Tabbar

    多图警告!!! 最近在工作中遇到这样一个需求:微信小程序底部的Tab需要通过判断登录人的角色动态进行改变,想要实现这个功能依靠小程序原生的Tabbar是不可能实现的了,所以研究了一下自定义Tab,这里 ...

  2. 微信小程序调接口常见问题解决方法

    第一次调接口时遇见的bug. 注意:接口的域名不能使用 IP 地址或 localhost,且不能带端口号: 微信小程序如何调接口? wx.request({ url: 'http://miniapp/ ...

  3. 微信小程序——页面中调用组件方法

    我现在有一个弹层的组件(popup),组件里面定义了显示组件(showPopup)和隐藏组件(hidePopup)的方法. 我们如何在调用组件的页面中调用组件里面的方法呢? 在调用组件的页面写如下代码 ...

  4. 微信小程序底部导航Tabbar

    1,底部导航栏这个功能是非常常见的一个功能,基本上一个完成的app,都会存在一个导航栏,那么微信小程序的导航栏该怎么实现呢?经过无数的踩坑,终于实现了,好了,先看看效果图. 2,对于底部导航栏,小程序 ...

  5. 微信小程序 传值取值的方法总结

    微信小程序 传值取值的几种方法总结 列表index下标取值 页面传值 form表单取值 1. 列表index下标取值 实现方式是:data-index="{{index}}"挖坑及 ...

  6. 微信小程序底部导航栏部署

    在微信小程序开发app.json(app.json它是定义全局页面) 只是用来部署微信底部的图标,最多不能大于五个 "tabBar":{ "selectedColor&q ...

  7. JavaScript和微信小程序获取IP地址的方法

    最近公司新加了一个需求,根据用户登录的IP地址判断是否重复登录,重复登录就进行逼退,那么怎么获取到浏览器的IP地址呢?最后发现搜狐提供了一个JS接口,可以通过它获取到客户端的IP. 接口地址如下: h ...

  8. 微信小程序分享到朋友圈方法与技巧

    小程序提供onShareAppMessage 函数,此函数只支持分享给我微信朋友.小程序如何分享到朋友圈呢? 我提供的方法是,使用canvas绘制一张图片,并用wx.previewImage预览图片, ...

  9. 微信小程序底部弹框动画

    在写小程序的时候,一般会碰到底部弹出动画,就像下面这样的效果 直接进入正题 https://mp.weixin.qq.com/debug/wxadoc/dev/api/api-animation.ht ...

随机推荐

  1. Java中的Switch....case语句:

    一.格式: switch(表达式){ case 常量表达式1:  语句1;    case 常量表达式2:  语句2;    …     case 常量表达式n:  语句n;    default: ...

  2. 07 Deque的应用案例-回文检查

    - 回文检测:设计程序,检测一个字符串是否为回文. - 回文:回文是一个字符串,读取首尾相同的字符,例如,radar toot madam. - 分析:该问题的解决方案将使用 deque 来存储字符串 ...

  3. idea一键生成mybatis工具

    1.创建maven项目,导包 <build> <plugins> <plugin> <groupId>org.mybatis.generator< ...

  4. centos 7 搭建 LNMP ( Linux+Nginx+MySQL+PHP )

    操作系统 | CentOS Linux release 7.6.1810 (Core) [root@localhost ~# cat /etc/redhat-release CentOS Linux ...

  5. Ubuntu Linux 查看、编辑、比较二进制文件

    查看二进制有以下几种方法: 方法一:hexdump apt-get install libdata-hexdumper-perl 安装好之后就可以直接hexdump your_binary_file ...

  6. golang time json mongodb 时间处理

    golang 中解决前端time 输出,后端mongodb中时间存储. package mask import ( "fmt" "time" "go. ...

  7. 在vue移动端使用lib-flexible和px2remLoader适配屏幕

    在对移动端的适配过程中,之前一直用的rem来进行,通过自己封装一个rem的计算函数来对整个项目进行适配.现在发现了一种更为简单,也更加方便的方式来对移动端进行屏幕的适配. 下载lib-flexible ...

  8. [HDU 3521] [最小割] Being a Hero

    题意: 在一个有向图中,有n个点,m条边$n \le 1000 \And \And  m \le 100000$ 每条边有一个破坏的花费,有些点可以被选择并获得对应的金币. 假设一个可以选的点是$x$ ...

  9. java8学习之Stream源码分析

    上一次已经将Collectors类中的各种系统收集器的源代码进行了完整的学习,而在之前咱们已经花了大量的篇幅对其Stream进行了详细的示例学习,如: 那接下来则通过源代码的角度来对Stream的运作 ...

  10. JDK代码查看--Eclipse

    除了要会查找文档,还要学会使用查看代码. 首先看一看你是否下载了源码,如果没下载就去网上下载一个版本,在Eclipse中window->Preferences->Java->Inst ...