### [微信小程序开发之选项卡(窗口底部TabBar)页面切换实现](https://www.prosaas.cn/article/17611)

**Published:** 2018-05-15T06:17:20

**Author:** 5201314

**Excerpt:** 本文主要介绍了微信小程序开发之选项卡(窗口底部TabBar)页面切换的相关知识。具有很好的参考价值。下面跟着小…

本文主要介绍了微信小程序开发之选项卡(窗口底部TabBar)页面切换的相关知识。具有很好的参考价值。下面跟着小编一起来看下吧

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

![](https://img.php.cn/upload/article/000/000/164/ac5e08f7fe223a6625916758ea445588-0.gif)

**代码:**

**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目录下写好页面即可切换.**

以上就是微信小程序开发之选项卡(窗口底部TabBar)页面切换实现的详细内容，更多请关注知企PROSAAS其它相关文章！

**Categories:** 后端开发

---