欢迎光临,了解微信小程序开发,就上易用通!

TITF:tabBar的使用小技巧(附数据绑定一个对象到数组中,然后取值的一个注意

发布:2018-01-29 10:07浏览: 来源:网络 作者:cola

本文来自公众号:TITF
一:tabBar的使用小技巧

TITF:tabBar的使用小技巧(附数据绑定一个对象到数组中,然后取值的一个注意(图1)

原理:在app.json中配置tabBar属性

3、关键代码

 

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15

											
"tabBar": {
"color":"#666666",
"selectedColor":"#06bd04",
"list": [{
"pagePath": "index",
"text": "首页",
"iconPath": "images/index.png",
"selectedIconPath": "images/indexHL.png"
},{
"pagePath": "picDisplay",
"text": "图片展示",
"iconPath": "images/picDisplay.png",
"selectedIconPath": "images/picDisplayHL.png"
}]
}
 来自CODE的代码片
snippet_file_0.txt

 

4、操作方法

 

  • 新建一个项目,打开app.json文件,将关键代码复制到"window":{},后面,注意window的大括号前加逗号,如下图

 

TITF:tabBar的使用小技巧(附数据绑定一个对象到数组中,然后取值的一个注意(图2)

 

  • 配置tabBar属性值
  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22

											
"tabBar": {
//设置tabBar文字默认颜色
"color":"#666666",
//设置tabBar文字被选中是的颜色
"selectedColor":"#06bd04",
//tab列表,数组类型,改数组内至少要有两个但不大于5个的tab对象
"list": [{
//设置tab跳转页面链接
"pagePath": "index",
//设置tab上的文字
"text": "首页",
//设置tab上的默认图标
"iconPath": "images/index.png",
//设置tab被选中时的图标
"selectedIconPath": "images/indexHL.png"
},{
"pagePath": "picDisplay",
"text": "图片展示",
"iconPath": "images/picDisplay.png",
"selectedIconPath": "images/picDisplayHL.png"
}]
}
二:数据绑定一个对象到数组中,然后取值的一个注意点(分享者:guonei001)

通过wx.request获取到服务器数据之后将数据(一个json对象)绑定至post数组,然后页面中获取数据的时候可以直接通过(数组名.属性)直接取值。数组中有多个json对象的话,则需要wx:for遍历取值。

 

单个json对象数据绑定

TITF:tabBar的使用小技巧(附数据绑定一个对象到数组中,然后取值的一个注意(图3)

页面取值:

TITF:tabBar的使用小技巧(附数据绑定一个对象到数组中,然后取值的一个注意(图4)






免责声明:本站所有文章和图片均来自用户分享和网络收集,文章和图片版权归原作者及原出处所有,仅供学习与参考,请勿用于商业用途,如果损害了您的权利,请联系网站客服处理。