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

1、從配置文件中設置tabBarjavascript

app.json配置文件中配置tab的項:html

"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"
      }
    ]
  },

更多屬性說明:java

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

 

2、使用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

經常使用操做api

1.目前已經支持唏噓該tab的項內容連接地址,目前不支持刪除某一項微信

2.目前支持總體顯示和隱藏 tabBar網絡

3.目前支持顯示或隱藏紅點  、顯示或隱藏badgeapp

 

在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

相關文章
相關標籤/搜索