微信小程序中的 tabbar

微信小程序中的 tabbar 是指底部的导航栏，通常用于切换小程序的不同页面。在 tabbar 中，每个选项卡都代表着一个页面，用户可以通过点击不同的选项卡来快速切换到对应的页面。

在微信小程序中，可以通过使用 wx.tabBar() API 来设置 tabbar 的样式和选项卡的数量，同时也可以通过设置不同的页面路径来实现切换不同的页面。通常情况下，tabbar 会包含四到五个选项卡，每个选项卡都会显示对应页面的图标和名称，用户可以通过点击选项卡来快速切换到对应的页面。

需要注意的是，在微信小程序中，tabbar 只能在 app.json 文件中设置一次，且不能动态添加或删除选项卡。如果需要动态切换页面或添加新页面，可以通过 wx.navigateTo() 或 wx.switchTab() 等 API 来实现。

以下是一个简单的微信小程序 tabbar 的代码示例，其中包含了两个页面：

index 页面，包含了一个文本框和一个按钮，用于输入姓名并跳转到 greeting 页面。

greeting 页面，用于显示欢迎信息，并在底部的 tabbar 中高亮显示当前选项卡。

app.json：

{
  "pages": [
    "pages/index/index",
    "pages/greeting/greeting"
  ],
  "tabBar": {
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "images/tabbar/home.png",
        "selectedIconPath": "images/tabbar/home-selected.png"
      },
      {
        "pagePath": "pages/greeting/greeting",
        "text": "问候",
        "iconPath": "images/tabbar/greeting.png",
        "selectedIconPath": "images/tabbar/greeting-selected.png"
      }
    ]
  }
}

index页面

  
    
    确定
  

index  js:

Page({
  data: {
    name: ''
  },

  onNameInput: function(event) {
    this.setData({
      name: event.detail.value
    })
  },

  onSubmit: function() {
    wx.navigateTo({
      url: '/pages/greeting/greeting?name=' + this.data.name
    })
  }
})

  
    {{ greeting }}
  

greeting页面：

js:

Page({
  data: {
    name: '',
    greeting: ''
  },

  onLoad: function(options) {
    this.setData({
      name: options.name || ''
    })

    this.setGreeting()
  },

  setGreeting: function() {
    let greeting = '欢迎'

    if (this.data.name) {
      greeting += '，' + this.data.name
    }

    greeting += '！'

    this.setData({
      greeting: greeting
    })
  }
})

以上代码示例中，tabBar 的样式和选项卡是在 app.json 中设置的，而在 index 页面中，点击提交按钮会跳转到 greeting 页面，并通过 URL 参数将姓名传递给 greeting 页面。在 greeting 页面中，可以根据 URL 参数来生成欢迎信息，并将其显示在页面上。同时，在 tabBar 中，当前选项卡会被高亮显示。