赞
踩
微信小程序中的 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 中,当前选项卡会被高亮显示。
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。