微信小程序中的 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页面
<view class="container">
<view class="input-container">
<input class="input" placeholder="请输入姓名" bindinput="onNameInput" />
<button class="button" bindtap="onSubmit">确定</button>
</view>
</view>
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
})
}
})
<view class="container"> <view class="greeting"> {{ greeting }} </view> </view>
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 中,当前选项卡会被高亮显示。