微信小程序tabBar 设置和使用整理

一、从配置文件中设置tabBar

app.json配置文件中配置tab的项：

  "tabBar": {
    "color": "#000",
    "selectedColor": "#F69C21",
    "borderStyle": "black",
    "backgroundColor": "#ffffff",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "style/image/index.png",
        "selectedIconPath": "style/image/index1.png"
      },
      {
        "pagePath": "pages/tabone/tabone",
        "text": "订单",
        "iconPath": "style/image/order.png",
        "selectedIconPath": "style/image/order1.png"
      }
    ]
  },

更多属性说明：

https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html#tabBar

 

二、使用js代码修改tabBar

关于tabBar的目前支持的jsAPI如下：

Tab Bar

名称	功能说明
wx.showTabBarRedDot	显示 tabBar 某一项的右上角的红点
wx.showTabBar	显示 tabBar
wx.setTabBarStyle	动态设置 tabBar 的整体样式
wx.setTabBarItem	动态设置 tabBar 某一项的内容，2.7.0 起图片支持临时文件和网络文件
wx.setTabBarBadge	为 tabBar 某一项的右上角添加文本
wx.removeTabBarBadge	移除 tabBar 某一项右上角的文本
wx.hideTabBarRedDot	隐藏 tabBar 某一项的右上角的红点
wx.hideTabBar	隐藏 tabBar

常用操作

1.目前已经支持唏嘘该tab的项内容链接地址，目前不支持删除某一项

2.目前支持整体显示和隐藏 tabBar

3.目前支持显示或隐藏红点  、显示或隐藏badge

 

在app onLanch的时候即可修改tab项

App({
  onLaunch: function () {
    //修改tab项
    wx.setTabBarItem({
      index: 0,
      text: 'text',
      pagePath: '/pages/textarea/textarea',
      iconPath: '/style/image/address.png',
      selectedIconPath: '/style/image/address.png',
      success: res => {
        console.info(res);
      },
      fail: res => {
        console.info(res);
      }
    });

    //隐藏tab项
    // wx.hideTabBar({
    // })
    //显示红点
    wx.showTabBarRedDot({
      index: 1,
    })
    //显示红字，badge
    wx.setTabBarBadge({
      index: 0,
      text: '3',
    });
  },
  globalData: {
    userInfo: null
  }
})

 

更多：

解决微信支付中申请退款的基础连接已经关闭的错误

维信小程序button样式重写

微信小程序选择位置接口wx.chooseLocation

 

转载于:https://my.oschina.net/tianma3798/blog/3070397