金宝搏平台:微信小程序初级开发-顶部标题、底部菜单

金宝搏平台 1
  • 微信小程序初级开发-第一个程序
  • 微信小程序初级开发-横向纵向布局
  • 微信小程序初级开发-访问第三方网页
  • 微信小程序初级开发-顶部标题、底部菜单(Tab)
  • 微信小程序初级开发-如何在项目中加入图片、图标等?

知晓程序员,专注微信小程序开发的程序员!


今天说说tabBar的使用,先看看官方说法:如果小程序是一个多 tab
应用(客户端窗口的底部或顶部有 tab 栏可以切换页面),可以通过 tabBar
配置项指定 tab 栏的表现,以及 tab 切换时显示的对应页面

顶部标题

备注:

在页面对应的 .json 文件中配置:

当设置 position 为 top 时,将不会显示 icon

{ “navigationBarTitleText”: “最新” }

tabBar 中的 list 是一个数组,只能配置最少2个、最多5个 tab,tab
按数组的顺序排序。

底部菜单(Tab)

(tabBar图例讲解)

通过前面的介绍,我们已经建立了一个简单的微信小程序,但是微信小程序不可能只有一个页面,一般都有多个页面,然后底部有一个菜单进行切换,如何实现呢?

今天在做投一个小程序时,也用到了tabBar,先看一下示例:

金宝搏平台 1

为什么没有自己实现tabBar?因为自己实现的tabBar,没有官方的常驻底部的效果好,官方的组件也有限制:不能完全满足自定义需求。比如不支持iconfont图标,也不能展示其他样式风格。

只需要在 app.json 中作添加如下配置(实际配置时,请去掉注释):

不废话,来看代码吧,代码需要在app.json中进行配置,如下:

“tabBar”: { “color”: “#000000”, // 文字颜色 “selectedColor”:
“#1aad19”, // 当前项文字颜色 “backgroundColor”: “#ffffff”, // 背景色
“borderStyle”: “black”, // 上边框颜色,目前仅支持:black/white,搞不懂
“list”: [ { “pagePath”: “pages/buy/buy”, // 页面路径,必须在 pages
中先定义 “text”: “购买”, // 项文字 “iconPath”: “icons/icon.png”, //
限制为40kb,建议尺寸为 81px * 81px “selectedIconPath”:
“icons/icon-selected.png” // 限制为40kb,建议尺寸为 81px * 81px }, {
“pagePath”: “pages/order/order”, “text”: “订单”, “iconPath”:
“icons/icon.png”, “selectedIconPath”: “icons/icon-selected.png” }, {
“pagePath”: “pages/mine/mine”, “text”: “我的”, “iconPath”:
“icons/icon.png”, “selectedIconPath”: “icons/icon-selected.png” } ], //
最少 2 项,最多 5 项 “position”: “bottom” // 位于顶部还是底部,可选值
bottom、top }

“tabBar”:{

各个属性的注释都在上面,一看即懂。注意,本身是不支持这样注释的,我这样写,完全是为了大家好理解。

“color”:”#7f8389″,

不知道怎么将 .png 图片加入到项目中?继续阅读本文连载吧。

“selectedColor”:”#00a8f3″,

  • 微信小程序初级开发-第一个程序
  • 微信小程序初级开发-横向纵向布局
  • 微信小程序初级开发-访问第三方网页
  • 微信小程序初级开发-顶部标题、底部菜单(Tab)
  • 微信小程序初级开发-如何在项目中加入图片、图标等?

“borderStyle”:”black”,


“backgroundColor”:”#f7f7fa”,

“list”:[

{

“pagePath”:”pages/index/index”,

“text”:”新建投票”,

“iconPath”:”images/create_vote.png”,

“selectedIconPath”:”images/create_vote_selected.png”

},

{

“pagePath”:”pages/square/square”,

“text”:”投票广场”,

“iconPath”:”images/square_vote.png”,

“selectedIconPath”:”images/square_vote_selected.png”

},

{

发表评论

电子邮件地址不会被公开。 必填项已用*标注