微信小程序开发之选项卡(窗口底部TabBar)页面切换

作者:dzp_coder 时间:2024-03-08 08:19:29 

微信小程序开发中窗口底部tab栏切换页面很简单很方便.

微信小程序开发之选项卡(窗口底部TabBar)页面切换

代码:

1.app.json


//app.json
{
"pages":[
 "pages/index/index",
 "pages/logs/logs"
],
"window":{
 "backgroundTextStyle":"light",
 "navigationBarBackgroundColor": "#999999",
 "navigationBarTitleText": "tab",
 "navigationBarTextStyle":"white"
},
 "tabBar": {
 "color": "#ccc",
 "selectedColor": "#35495e",
 "borderStyle": "white",
 "backgroundColor": "#f9f9f9",
 "list": [
  {
   "text": "首页",
   "pagePath": "pages/index/index",
   "iconPath": "images/home.png",
   "selectedIconPath": "images/home-actived.png"
  },
  {
   "text": "目录",
   "pagePath": "pages/catalogue/catalogue",
   "iconPath": "images/note.png",
   "selectedIconPath": "images/note-actived.png"
  },
  {
   "text": "我的",
   "pagePath": "pages/mine/mine",
   "iconPath": "images/profile.png",
   "selectedIconPath": "images/profile-actived.png"
  }
 ]
}
}

pagePath是页面路径.iconPath是图片路径,icon 大小限制为40kb.

selectedIconPath:选中时的图片路径,icon 大小限制为40kb

tab Bar的最多5个,最少2个.

在pages目录下写好页面即可切换.

来源:http://blog.csdn.net/qq_31383345/article/details/52900537

标签:小程序,tab
0
投稿

猜你喜欢

  • PDO::getAvailableDrivers讲解

    2023-06-08 22:24:20
  • Python urlopen()和urlretrieve()用法解析

    2022-02-10 04:47:30
  • Keras中的两种模型:Sequential和Model用法

    2021-10-16 07:04:32
  • Python程序中设置HTTP代理

    2023-01-06 11:32:23
  • Python使用POP3和SMTP协议收发邮件的示例代码

    2023-10-03 15:37:28
  • windows下mysql 8.0.13 解压版安装图文教程

    2024-01-17 04:03:56
  • Python代码实现http/https代理服务器的脚本

    2022-04-12 10:19:06
  • javascript自定义函数参数传递为字符串格式

    2024-04-22 13:08:18
  • JavaScript入门教程(7) History历史对象

    2024-05-11 10:23:47
  • 解析Python中while true的使用

    2022-07-23 21:19:53
  • MySQL5.7.23解压版安装教程图文详解

    2024-01-15 18:19:27
  • 解决mysql登录错误:'Access denied for user 'root'@'localhost'

    2024-01-22 16:41:20
  • 从go语言中找&和*区别详解

    2024-04-30 10:04:50
  • python和pygame实现简单俄罗斯方块游戏

    2022-10-04 20:00:49
  • 对python中数组的del,remove,pop区别详解

    2021-01-23 09:22:31
  • tensorboard实现同时显示训练曲线和测试曲线

    2023-05-18 04:55:34
  • 在sql Server自定义一个用户定义星期函数

    2012-02-12 15:47:28
  • python中的计时器timeit的使用方法

    2023-04-24 14:50:56
  • Oracle REGEXP_LIKE模糊查询用法例子

    2023-07-19 08:26:22
  • python通过装饰器检查函数参数数据类型的方法

    2022-07-22 14:11:08
  • asp之家 网络编程 m.aspxhome.com