小程序自定义TabBar 如何实现“keep-alive”

2024-01-29 09:03:59

前言
小程序自定义TabBar是微信小程序中一种常见的UI元素，它可以帮助用户在小程序的各个页面之间进行切换。默认情况下，小程序的TabBar并不支持“keep-alive”，这意味着当用户切换页面时，当前页面的状态将丢失。这可能会导致用户体验不佳，尤其是当用户在页面上输入了大量数据时。

如何实现“keep-alive”

要实现“keep-alive”，我们需要在小程序的配置文件中添加一个配置项，如下所示：

{
  "pages": [
    "pages/index/index",
    "pages/detail/detail"
  ],
  "tabBar": {
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "path/to/icon.png",
        "selectedIconPath": "path/to/selected_icon.png"
      },
      {
        "pagePath": "pages/detail/detail",
        "text": "详情",
        "iconPath": "path/to/icon.png",
        "selectedIconPath": "path/to/selected_icon.png"
      }
    ]
  },
  "keepAlive": true
}

添加此配置项后，小程序的TabBar将支持“keep-alive”，这意味着当用户切换页面时，当前页面的状态将被保留。

示例代码

下面是一个示例代码，演示如何实现“keep-alive”：

// pages/index/index.js
Page({
  data: {
    count: 0
  },
  onLoad() {
    console.log('页面加载');
  },
  onShow() {
    console.log('页面显示');
  },
  onHide() {
    console.log('页面隐藏');
  },
  onUnload() {
    console.log('页面卸载');
  },
  incrementCount() {
    this.setData({
      count: this.data.count + 1
    });
  }
});

// pages/detail/detail.js
Page({
  data: {
    count: 0
  },
  onLoad() {
    console.log('页面加载');
  },
  onShow() {
    console.log('页面显示');
  },
  onHide() {
    console.log('页面隐藏');
  },
  onUnload() {
    console.log('页面卸载');
  },
  incrementCount() {
    this.setData({
      count: this.data.count + 1
    });
  }
});

在上面的示例代码中，我们在每个页面的onLoad()方法中添加了console.log()语句，以便我们可以看到页面加载、显示、隐藏和卸载的日志。当我们在两个页面之间切换时，我们可以看到onLoad()方法只会在新页面加载时被调用，而不会在旧页面卸载时被调用。这表明“keep-alive”功能已经成功启用。