当前位置： 移动技术网 > IT编程>开发语言>JavaScript > 微信小程序开发之选项卡(窗口底部TabBar)页面切换

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

2018年06月06日  | 移动技术网IT编程  | 我要评论

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

代码:

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

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持移动技术网！

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网