时间: 2020-11-20|61次围观|0 条评论

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

原文链接:https://blog.csdn.net/qq_31383345/article/details/52900537

本站声明:网站内容来源于网络,如有侵权,请联系我们,我们将及时处理。

本博客所有文章如无特别注明均为原创。
复制或转载请以超链接形式注明转自起风了,原文地址《微信小程序开发之选项卡(窗口底部TabBar)页面切换
   

还没有人抢沙发呢~