微信小程序 tabBar底部/顶部导航栏跳转

api->界面->tabBar
指南->基础能力->自定义tabBar

底部导航栏
(1)最少2个页面,最多5个页面
(2)使用tabBar切换页面后,wx.navigateTo跳转到tabBar页面将会失效,将wx.switchTab替换wx.navigateTo,直接替换名字即可,语法一样
(3)在app.json中配置,与pages同级
(4)属性:

  borderStyle:white/black 上边框的颜色
  position:top/bottom  导航栏位置
  color： 文字颜色
  selectedColor: 选中时文字颜色
  backgroundColor：导航栏背景色
  list:数组

  "tabBar": {
    "list": [{
      "pagePath": "跳转页面路径",
      "text": "底部/顶部文字显示",
      "iconPath": "未选中时图片路径",
      "selectedIconPath": "选中时图片路径"
    },
    {xx},
    {xx}
    ]
  }

代码示例:
app.json文件

{
  "pages": [
    "pages/index/index",
    "pages/news/news",
   
    "pages/logs/logs",
    "pages/news/news-detail/news-detail",
    "pages/movie/movie"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#00B26A",
    "navigationBarTitleText": "小程序",
    "navigationBarTextStyle": "black"
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json",

//tabBar导航栏
  "tabBar": {
    "position":"top",
    "selectedColor":"green",
    "list": [{
      "pagePath": "pages/news/news",
      "text": "旅游",
      "iconPath": "pages/images/yuedu.png",
      "selectedIconPath": "pages/images/yuedu.png"
    },
      {
        "pagePath": "pages/movie/movie",
        "text": "电影",
        "iconPath": "pages/images/diany.png",
        "selectedIconPath": "pages/images/diany.png"
      }
    ]
  }
}

跳转到tabBar导航页面的js

Page({
  goNews:function(event)
  {
    wx.switchTab({
      url:'../news/news'
    })
  }

})

效果图: