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

阳光穿透心脏的1/2处 2021-07-24 11:41 901阅读 0赞

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'
        })
      }
    
    })

效果图:  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70]: /images/20210724/d8632598bcb542c4a9508e80030c0da4.png