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. Python 第一个程序

    第一个程序 打开pycharm,新建一个工程,新建一个文件(后缀为.py) 书写最简单的代码:print(人生苦短,我用python!) 执行python代码 使用pycharm的运行按钮 终端下输入 ...

  2. 第二十三篇 jQuery 学习5 添加元素

    jQuery 学习5 添加元素   同学们,这节课,使用jQuery动态添加元素,是很关键的一课,一般用在什么地方呢:别人发表一篇文章,你评论楼主的时候,总不能是提交表单,到后台的其他页面处理,然后再 ...

  3. 64位Win7安装Oracle12C临时位置权限错误解决方案

    今天装备安装Oracle12C体验一下,结果遇到问题:请确保当前用户具有访问临时位置所需的权限,无法继续安装,上网查了一下,解决方案如下:  第一步:  控制面板>所有控制面板项>管理工具 ...

  4. Linux课程学习 第三课

    生活中的许多事,并不是我们不能做到,而是我们不相信能够做到 https://www.linuxcool.com/ 一个很实用的Linux命令查询网站,并且还有发音 如果我们在系统终端中执行一个命令后想 ...

  5. top 1 1

    这个是今天刚发现的,以前都是top 10 这样的用法,今天看到这个用法竟然懵逼了,所以到网站查了一下, 百度上的结果: 这个是SQLSERVER选择表中符合条件的前N行记录的语句.不过,TOP后边跟的 ...

  6. 08Request

    1.request对象和response对象的原理 1. request和response对象是由服务器创建的.我们来使用它们 2. request对象是来获取请求消息,response对象是来设置响 ...

  7. Codeforces Round #581 (Div. 2) B. Mislove Has Lost an Array (贪心)

    B. Mislove Has Lost an Array time limit per test1 second memory limit per test256 megabytes inputsta ...

  8. java将一数组乱序排列

    JAVA的Collections类中shuffle方法模拟了“洗牌”动作可以对list列表进行随机排序.如果一定要自己写,算法也很简单:假设数组array长度为n.用标准随机函数rand(n)生成[0 ...

  9. ab测试nginx Nginx性能优化

    转自:https://www.cnblogs.com/nulige/p/9369700.html 1.性能优化概述 在做性能优化前, 我们需要对如下进行考虑 1.当前系统结构瓶颈 观察指标 压力测试 ...

  10. nginx启动、停止、重启

    转自https://www.cnblogs.com/wangcp-2014/p/9922845.html 启动 启动代码格式:nginx安装目录地址 -c nginx配置文件地址 例如: [root@ ...