微信小程序实战开发三:小程序之全局配置APP.JSON之底部菜单栏tabBar
时间:2022-07-24
本文章向大家介绍微信小程序实战开发三:小程序之全局配置APP.JSON之底部菜单栏tabBar,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
小程序全局配置里面自带的底部菜单配置,具体介绍如下:
全局配置官方说明文档地址:https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html#tabBar
这个功能可以让用户自定义底部菜单 ,可以单独文字,或者文字配图标两种方式。通过tabBar的配置文件来实现。
通过说明我们可以看到用户可以自定义关于底部菜单的一些属性,包括 文字颜色 边框颜色位置等。还可以设置自定义菜单(以后用到的时候再讲)
这里面最重要的就是LIST这个参数。
从说明中我们可以看出来 LIST为至少是2个最多5个的数组,数组元素必须包含 pagPath和text两个参数。同时还可以选填 iconpath和selectedIconPath这两项。
介绍很明确,使用也很简单,直接上代码吧。
在 全局文件app.json中,我们来订单 tabBar
代码如下:
"tabBar": {
"list": [
{
"pagePath": "pages/index/index",
"text": "首页",
"iconPath":"pages/images/index.png",
"selectedIconPath":"pages/images/index_active.png"
},
{
"pagePath": "pages/paimai/paimai",
"text": "拍卖",
"iconPath":"pages/images/paimai.png",
"selectedIconPath":"pages/images/paimai_active.png"
},
{
"pagePath": "pages/zhibo/zhibo",
"text": "直播",
"iconPath":"pages/images/zhibo.png",
"selectedIconPath":"pages/images/zhibo_active.png"
},
{
"pagePath": "pages/paipingupload/paipingupload",
"text": "拍品征集",
"iconPath":"pages/images/paiping.png",
"selectedIconPath":"pages/images/paiping_active.png"
},
{
"pagePath": "pages/my/my",
"text": "我的",
"iconPath":"pages/images/my.png",
"selectedIconPath":"pages/images/my_active.png"
}
]
},
我们定义了5个页面,并给它们都配了图。。效果如下:
在小程序开发工具中预览效果不太好看,但手机打开的时候效果就好了,不用介意。
通过使用全局变量的tabBar参数,我们成功定义了底部菜单。这一章很容易理解没什么可以再讲的了。自已实验一下就全明白了。
- AI加持下的假肢将会越来越聪明
- 通过几个Hello World感受.NET Core全新的开发体验
- ASP.NET MVC三个重要的描述对象:ControllerDescriptor
- 基于自制数据集的MobileNet-SSD模型训练
- .NET Core采用的全新配置系统[1]: 读取配置数据
- ASP.NET MVC三个重要的描述对象:ActionDescriptor
- 升级比特币区块链后,以特币已叩响成功的大门
- .NET Core采用的全新配置系统[2]: 配置模型设计详解
- 采用双拼域名meicai.cn的美菜网融资4.5亿美元
- 区块链技术或将迎来突破性进展,以特币未来生机勃勃
- 配置多个网卡的OpenStack VM
- .NET Core采用的全新配置系统[3]: “Options模式”下的配置是如何绑定为Options对象
- 游戏用户中心开发
- .NET Core采用的全新配置系统[4]: “Options模式”下各种类型的Options对象是如何绑定的?
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 基于Android studio3.6的JNI教程之ncnn之语义分割ENet
- android计算器实现两位数的加减乘除
- android studio实现简单考试应用程序实例代码详解
- Kotlin 实现按钮点击跳转监听事件方式
- Android使用剪切板传递数据
- kotlin anko页面跳转实现方式,携带参数或flag
- 关于android连续点击出现多个Activity界面的解决方法
- Android Studio使用recyclerview实现展开和折叠功能(在之前的微信页面基础之上)
- 解决django 多个APP时 static文件的问题
- Android Studio如何获取SQLite数据并显示到ListView上
- Android自定义短信倒计时view流程分析
- 使用Android studio3.6的java api方式调用opencv
- thinkphp5 + ajax 使用formdata提交数据(包括文件上传) 后台返回json完整实例
- php+iframe 实现上传文件功能示例
- php5.3/5.4/5.5/5.6/7常见新增特性汇总整理