网络编程
位置:首页>> 网络编程>> JavaScript>> 微信小程序开发之选项卡(窗口底部TabBar)页面切换

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

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

标签:小程序,tab

微信小程序开发中窗口底部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

0
投稿

猜你喜欢

手机版 网络编程 asp之家 www.aspxhome.com