返回

微信小程序页面切换的两种选择，早掌握早上手

前端

微信小程序页面切换：两种选择，随心所欲

微信小程序 是一款强大的开发平台，允许开发者创建用户友好的移动应用程序。其中，页面切换 是构建应用程序的重要方面，可以无缝地引导用户浏览应用程序的不同部分。微信小程序提供了两种页面切换方式：顶部切换和底部切换。

顶部切换

顶部切换通过在页面顶部显示一个导航栏 来实现。导航栏中可以包含多个标签，每个标签对应一个页面。当用户点击某个标签时，页面将切换到相应的页面。

<navigation-bar title="我的小程序" page-current="{{page.path}}" >
  <navigation-bar-item index="0" text="首页" url="/pages/index/index" />
  <navigation-bar-item index="1" text="日志" url="/pages/logs/logs" />
</navigation-bar>

底部切换

底部切换通过在页面底部显示一个工具栏 来实现。工具栏中也可以包含多个标签，每个标签对应一个页面。当用户点击某个标签时，页面将切换到相应的页面。

<tab-bar>
  <tab-bar-item index="0" text="首页" iconPath="/static/images/home.png" selectedColor="#1296db" />
  <tab-bar-item index="1" text="日志" iconPath="/static/images/logs.png" selectedColor="#1296db" />
</tab-bar>

如何实现页面切换？

  1. 在 app.json 文件中配置页面路径：
{
  "pages": [
    "pages/index/index",
    "pages/logs/logs"
  ],
  "tabBar": {
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页"
      },
      {
        "pagePath": "pages/logs/logs",
        "text": "日志"
      }
    ]
  }
}
  1. 在 pages 目录下创建页面代码文件：
// pages/index/index.js
Page({
  onLoad() {
    // 页面加载时执行的代码
  }
})

// pages/logs/logs.js
Page({
  onLoad() {
    // 页面加载时执行的代码
  }
})
  1. 在 app.js 文件中添加代码：
App({
  onLaunch() {
    // 小程序启动时执行的代码
  }
})

配置选项

  • tabBar 最少配置和最多配置： tabBar 最少需要配置两个标签，最多可以配置五个标签。
  • 标签： 标签用来代表页面，每个标签都有一个 pagePath 属性（页面的路径）和一个 text 属性（标签的文本）。

开发技巧

  • 使用微信开发工具： 推荐使用微信官方提供的微信开发工具进行开发，它可以帮助您简化开发和调试过程。
  • 入门学习： 可以通过阅读微信官方文档或参加培训班来入门微信小程序开发。
  • 遵循最佳实践： 查看微信官方提供的指南，了解最佳实践，提高开发效率和质量。

常见问题解答

  1. 如何更改标签的文本颜色？

    .tabBar .tabBar-item--current {
  color: #1296db !important;
}

  2. 如何禁用某个标签？

    <tab-bar-item index="2" text="更多" disabled />

  3. 如何设置默认激活的标签？

    "tabBar": {
  "list": [
    {
      "pagePath": "pages/index/index",
      "text": "首页"
    },
    {
      "pagePath": "pages/logs/logs",
      "text": "日志",
      "selected": true
    }
  ]
}

  4. 如何监听标签点击事件？

    <tab-bar bindtab="onTabChange" />

onTabChange(e) {
  console.log('当前标签索引：', e.detail.index)
}

  5. 如何隐藏底部标签栏？

    <tab-bar style="display: none" />