微信小程序页签

微信小程序页签是指在微信小程序中，用户可以通过点击不同的标签来切换和浏览不同的页面内容。页签通常位于小程序的顶部或底部，用户可以方便地在不同的页签之间切换。

要实现微信小程序页签，你需要遵循以下步骤：

1. 创建页签页面：在项目中创建一个新的页面，例如 tabs，并在 tabs.json 文件中配置 tabBar，如下所示：

{
  "tabBar": {
    "list": [
      {
        "pagePath": "pages/tab1/tab1",
        "text": "首页"
      },
      {
        "pagePath": "pages/tab2/tab2",
        "text": "发现"
      },
      {
        "pagePath": "pages/tab3/tab3",
        "text": "我的"
      }
    ]
  }
}

2. 创建页签内容页面：在项目中创建与页签数量相同的页面，例如 tab1、tab2 和 tab3。在这些页面中编写你的页签内容。

3. 在 app.json 文件中配置 tabBar：

{
  "pages": [
    "pages/tabs/tabs"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle": "black"
  },
  "tabBar": {
    "color": "#999",
    "selectedColor": "#333",
    "backgroundColor": "#fff",
    "borderStyle": "black",
    "list": [
      {
        "pagePath": "pages/tab1/tab1",
        "text": "首页",
        "iconPath": "images/tab1.png",
        "selectedIconPath": "images/tab1-active.png"
      },
      {
        "pagePath": "pages/tab2/tab2",
        "text": "发现",
        "iconPath": "images/tab2.png",
        "selectedIconPath": "images/tab2-active.png"
      },
      {
        "pagePath": "pages/tab3/tab3",
        "text": "我的",
        "iconPath": "images/tab3.png",
        "selectedIconPath": "images/tab3-active.png"
      }
    ]
  }
}

4. 在 app.wxss 文件中设置全局样式，以确保页签在所有页面中都能正常显示。

/* app.wxss */
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 0 30rpx;
}

5. 在每个页签内容页面的 WXML 文件中编写页面内容，例如：

<!-- tab1.wxml -->
<view class="container">
  <text>这是首页</text>
</view>

<!-- tab2.wxml -->
<view class="container">
  <text>这是发现</text>
</view>

<!-- tab3.wxml -->
<view class="container">
  <text>这是我的</text>
</view>

按照以上步骤，你可以在微信小程序中实现页签功能。用户可以通过点击不同的标签来切换和浏览不同的页面内容。