网站导航
> 技术文档 > 微信小程序自定义tabBar实现及样式定制教程

微信小程序自定义tabBar实现及样式定制教程

网友: 技术文档 2025-07-30 11:33:33

本文还有配套的精品资源，点击获取 menu-r.4af5f7ec.gif

简介：本示例详细介绍了在微信小程序中如何实现和自定义 tabBar ，包括全局配置和页面特定配置的设置。通过修改 app.json 和 globalStyle ，以及使用 wxss 进行样式定制，开发者能够创建符合项目需求的个性化底部导航栏。同时提供了两种模式的示例，展示了如何根据具体需求调整 tabBar 样式和内容。 小程序tabBar示例

1. 微信小程序tabBar组件概述

微信小程序的tabBar组件是其界面设计中非常重要的一个部分，它为用户提供了快速访问小程序主要页面的途径。在微信小程序的底部或顶部，用户可以一目了然地看到各个功能模块的入口，快速切换和访问。本章将从tabBar组件的基础概念入手，简述其在小程序中的作用，以及如何对tabBar进行基本配置，为后面更深入的讲解打下基础。

1.1 小程序tabBar功能简介

tabBar是微信小程序底部导航栏的简称，通过这个组件，开发者可以设置固定数量的导航项。这些导航项通常包含了小程序中的主要功能模块，允许用户快速在各个主要页面之间进行切换。tabBar不仅提升了用户体验，也使得页面间的跳转变得更为直观和便捷。

1.2 tabBar的组成和元素

一个标准的tabBar主要包括两个核心元素：图标和文字。图标通常用来表示各个功能模块的符号，而文字则是对图标功能的补充说明。在微信小程序中，tabBar可以设置为单色图标或多色图标，颜色和图标样式可以按照开发者的设定来调整，以适应不同的页面风格和主题。

1.3 tabBar的实用性和适用场景

在移动应用中，tabBar的实用性是非常高的。它可以有效减少用户的导航时间，提高操作的便捷性。尤其适用于功能模块较多的小程序，通过清晰的tabBar布局，可以引导用户快速找到他们感兴趣的内容或服务。此外，在那些需要用户频繁切换页面的应用场景中，一个设计良好的tabBar更是必不可少的。

总结而言，微信小程序的tabBar组件不仅仅是一个导航工具，它还体现了小程序对用户体验的重视。随着我们进一步深入学习tabBar的配置和优化方法，开发者将能够更好地利用这一组件，提升小程序的可用性和交互体验。接下来，我们将探讨在小程序的配置文件 app.json 中如何具体配置tabBar。

2. app.json中tabBar的配置方法

2.1 tabBar的基本配置结构

在微信小程序中， tabBar 是页面底部的一个重要组成部分，它为用户提供了一个直观且易于操作的界面来在各个页面之间切换。它的配置主要是在项目根目录下的 app.json 文件中进行。

2.1.1 tabBar对象的构成要素

tabBar 对象通常由以下部分组成：

  • color ：文字颜色
  • selectedColor ：选中文字颜色
  • backgroundColor ：背景颜色
  • borderStyle ：边框样式
  • position ：位置，可选值有 top 和 bottom
  • list ：tab 项列表，数组形式，每一个元素包含 pagePath 、 text 、 iconPath 、 selectedIconPath 等属性 
\"tabBar\": { \"color\": \"#7A7E83\", \"selectedColor\": \"#3cc51f\", \"backgroundColor\": \"#ffffff\", \"borderStyle\": \"black\", \"position\": \"bottom\", \"list\": [ { \"pagePath\": \"pages/index/index\", \"text\": \"首页\", \"iconPath\": \"resources/home.png\", \"selectedIconPath\": \"resources/home_active.png\" }, { \"pagePath\": \"pages/log/log\", \"text\": \"日志\", \"iconPath\": \"resources/log.png\", \"selectedIconPath\": \"resources/log_active.png\" } ]}
2.1.2 常用配置项及其作用
  • color 与 selectedColor 项用于设置未选中和选中状态下的文字颜色，让用户能够清楚地看到当前选中的 tab。
  • backgroundColor 则设置整个 tab 区域的背景颜色。
  • borderStyle 用于设置 tab 的边框样式，其可选项通常只有 black 或 white 。
  • position 选项非常直观，用于指定 tab 的位置是底部还是顶部。
  • list 是一个数组，数组中的每一个元素代表一个 tab，包括该 tab 所关联的页面路径 pagePath 、显示的文本 text 、未选中时的图标 iconPath 和选中时的图标 selectedIconPath 。

2.2 tabBar的页面路径设置

2.2.1 页面与tabBar关联的规则

在 list 数组中，每一个元素的 pagePath 属性用来指定该 tab 关联的页面路径。这个路径是相对于 pages 目录的相对路径，并且这个页面必须是已经定义好的页面。

2.2.2 配置页面路径的注意事项
  • 确保 pagePath 指定的页面确实存在于项目中，否则在构建时微信小程序会报错。
  • 每一个 tab 必须关联一个有效的页面路径，否则该 tab 不会被显示。
  • 项目中页面的添加、删除都会影响到 tabBar 的配置。例如，添加新的页面，需要同步更新 list 数组以确保所有页面都能被访问。

2.3 tabBar的文本和图标设置

2.3.1 文本配置方法

text 属性用于设置每个 tab 上显示的文本内容。文本内容应简洁明了，易于用户理解当前页面的功能。在微信小程序的 tabBar 中，文本的颜色会根据 color 和 selectedColor 配置项自动调整。 

{ \"text\": \"首页\"}
2.3.2 图标配置方法

iconPath 和 selectedIconPath 属性分别用于设置 tab 未选中和选中时显示的图标。通常我们会为每个状态准备不同的图标，以直观反映当前页面的状态。注意图标的大小应尽量统一，以保证视觉上的和谐。 

{ \"iconPath\": \"resources/home.png\", \"selectedIconPath\": \"resources/home_active.png\"}

配置图标的路径时，需要确保该图标文件确实存在于项目的资源目录中。路径同样需要以 resources/ 为根目录进行指定，而非直接从项目根目录开始。

3. 自定义tabBar的开启与页面特定配置

微信小程序的原生tabBar虽然功能强大，但在某些特定场景下可能无法满足开发者的个性化需求。此时，开发者可以通过启用自定义tabBar来实现更为个性化的用户体验和更精细的交互设计。本章节将深入探讨如何开启自定义tabBar功能，以及如何进行页面特定的tabBar配置，使每个页面都能拥有独特的tabBar风格。

3.1 自定义tabBar的启用方法

在微信小程序中，自定义tabBar可以通过在app.json中进行配置来启用。我们需要明确自定义tabBar的优势和场景，并了解如何实现自定义tabBar功能。

3.1.1 如何开启自定义tabBar功能

自定义tabBar功能的开启非常简单，只需在app.json文件中设置 custom 属性为 true 即可。 

{ \"tabBar\": { \"custom\": true, ... }}

3.1.2 自定义tabBar的优势和场景

启用自定义tabBar功能后，开发者可以自由设计tabBar的布局、样式和交互逻辑。例如，在电商小程序中，为了强调促销活动，可以将活动页面的tabBar设计得更突出，并通过动画引导用户关注。此外，对于具有多个主要功能模块的应用，通过自定义tabBar可以更好地展示各模块的特色。

3.2 页面特定的tabBar配置

除了全局自定义tabBar外，微信小程序还支持对单个页面的tabBar进行特定配置，使得每个页面可以拥有不同的tabBar视觉效果和行为逻辑。

3.2.1 页面级别的tabBar定制

在app.json中，为每个页面配置不同的tabBar样式和行为，可以按照以下结构： 

{ \"pages\": [ \"pages/index/index\", \"pages/logs/logs\", ... ], \"window\": { ... }, \"tabBar\": { \"custom\": true, \"list\": [ { \"pagePath\": \"pages/index/index\", \"text\": \"首页\", \"iconPath\": \"images/home.png\", \"selectedIconPath\": \"images/home_active.png\", \"style\": { \"background\": \"#ffffff\" } }, ... ] }}

每个页面的配置项可以独立设置，包括图标、文本、颜色等，甚至可以对不同的页面使用不同的配置规则。

3.2.2 实现页面切换时tabBar变化

在页面切换时，有时需要对tabBar的显示进行特殊处理。例如，用户登录状态下与未登录状态下显示不同的tabBar，或者在某些特定页面隐藏tabBar。这可以通过在页面的生命周期函数中编写逻辑代码来实现。 

Page({ onShow() { // 页面显示时触发 if (用户已登录) { // 修改tabBar为登录状态下的样式 } else { // 隐藏tabBar或者切换到未登录状态的tabBar样式 } }})

通过以上方法，开发者可以灵活地对tabBar进行特定配置，为用户提供更为丰富和个性化的界面交互体验。

4. globalStyle中tabBar样式定义

在微信小程序中， globalStyle 是用来定义全局的窗口表现的，其影响的范围包括整个应用的导航栏、标签栏等。 tabBar 作为用户与应用进行交互的重要界面元素，其样式同样可以通过 globalStyle 进行全局配置。

4.1 globalStyle的定义和作用

4.1.1 globalStyle的配置语法

globalStyle 是在 app.json 文件中进行配置的，它允许开发者指定整个应用的界面风格。 tabBar 的全局样式定义通常需要在 globalStyle 下的 navigationStyle 字段中进行。 

{ \"globalStyle\": { \"navigationStyle\": \"default\", \"tabBar\": { \"color\": \"#000\", \"selectedColor\": \"#ff0000\", \"backgroundColor\": \"#ffffff\", \"borderStyle\": \"black\", \"list\": [ { \"pagePath\": \"pages/index/index\", \"text\": \"首页\", \"iconPath\": \"resources/home.png\", \"selectedIconPath\": \"resources/home_active.png\" }, { \"pagePath\": \"pages/logs/logs\", \"text\": \"日志\", \"iconPath\": \"resources/logs.png\", \"selectedIconPath\": \"resources/logs_active.png\" } ] } }}

4.1.2 全局样式对tabBar的影响

通过在 globalStyle 中配置 tabBar 的相关属性，可以统一设置整个应用 tabBar 的样式，包括颜色、背景色、图标等。这样做的好处是能够保证应用界面的一致性，并且提高开发效率，避免了在每个页面的 tabBar 中重复定义相同的样式。

4.2 全局tabBar样式的定制

4.2.1 修改全局tabBar的颜色和字体

要统一修改 tabBar 的颜色和字体，可以使用 color 和 selectedColor 字段来定义未选中和选中状态下的文字颜色。同时，可以设置字体大小和样式来进一步定制。 

\"tabBar\": { \"color\": \"#000000\", // 未选中的文字颜色 \"selectedColor\": \"#ff0000\", // 选中的文字颜色 \"backgroundColor\": \"#ffffff\", // 背景色 \"borderStyle\": \"black\", \"fontSize\": \"10px\", // 字体大小 \"fontFamily\": \"Arial\" // 字体样式}

4.2.2 全局tabBar的其他样式属性

除了颜色和字体， tabBar 的其他样式属性也可以通过 globalStyle 进行全局配置。例如，可以通过 borderStyle 设置 tabBar 的边框样式，通过 backgroundColor 设置背景颜色，甚至可以通过自定义图片来设置图标。

在上述示例中， borderStyle 设置为 \"black\" ，这样整个 tabBar 的边框就会显示为黑色。若要设置更多样式，如高度、位置等，需要配合自定义 tabBar 的方式，在 app.js 或者页面的 onLoad 方法中通过编程式导航进行控制。

此外，对于 tabBar 图标的自定义，开发者可以在 list 数组中使用 iconPath 和 selectedIconPath 指定图片路径。要实现响应式设计，还需注意不同分辨率的图片适配问题。

通过上述方法，开发者可以实现全局一致的 tabBar 风格，提升用户体验。需要注意的是，全局样式的设置需要根据实际应用的设计需求来调整，且改动全局样式可能影响应用的其他部分，因此在调整时需要谨慎考虑。

5. wxss在tabBar样式定制中的应用

在微信小程序中，wxss（WeiXin Style Sheets）是一种用于页面样式的样式表语言。它与传统的CSS类似，但是为了适应微信小程序的平台特性而进行了定制。这一章节将详细介绍wxss在tabBar样式定制中的应用，包括wxss与css的区别和联系，以及如何使用wxss来定制tabBar样式。

5.1 wxss与css的区别和联系

5.1.1 wxss的基本规则和特点

wxss是基于CSS的，但它也引入了一些新的特性来适应小程序的环境。例如，它可以使用rpx（responsive pixel）作为单位，以实现不同屏幕尺寸的自适应。此外，wxss支持在app.json中全局定义样式，且样式支持组件化。这意味着可以在组件中单独定义样式，而不影响全局样式。

5.1.2 wxss对tabBar样式的定制能力

wxss在定制tabBar样式方面提供了强大的能力。开发者可以使用wxss选择器指定tabBar的字体、颜色、边距、背景等。wxss还支持伪类选择器，这使得可以对tabBar的不同状态（如选中、未选中、不可点击等）进行样式定制。

代码块示例： 

/* 定义tabBar整体样式 */page { background-color: white;}/* 定义tabBar的文字样式 */.tabbar-text { color: #666; font-size: 28rpx;}/* 定义tabBar的选中状态样式 */.tabbar-text.selected { color: #1aad19;}

上述代码展示了一个简单的wxss样式示例，其中定义了tabBar的整体背景色、文字颜色、字体大小，以及选中状态下的文字颜色。

参数说明：

  • .tabbar-text : 自定义样式类，用于设置tabBar的文字颜色和字体大小。
  • .selected : 伪类选择器，用于设置tabBar在选中状态下的样式。

5.2 使用wxss定制tabBar样式

在了解了wxss的基本规则和特点后，我们将进入具体的应用阶段，看看如何使用wxss来定制tabBar的样式。

5.2.1 样式选择器在tabBar中的应用

要定制tabBar样式，第一步是了解微信小程序中tabBar相关的样式选择器。在wxss中，可以直接使用类选择器（ . ）和ID选择器（ # ），并且可以结合伪类选择器来处理不同的交互状态。

代码块示例： 

/* 定义tabBar的容器样式 */.tabbar-container { background-color: #f8f8f8; border-top: 1px solid #ccc;}/* 定义tabBar的单个项目样式 */.tabbar-item { padding: 10px 20px; text-align: center;}/* 定义tabBar的选中项目样式 */.tabbar-item.active { color: #1aad19; font-weight: bold;}

在上述代码中，定义了tabBar容器、单个项目和选中状态下的样式。通过这些选择器，可以覆盖微信小程序默认的tabBar样式，实现个性化的定制。

参数说明：

  • .tabbar-container : 自定义样式类，用于设置tabBar容器的背景色和边框。
  • .tabbar-item : 自定义样式类，用于设置tabBar每个项目的布局和样式。
  • .active : 伪类选择器，用于设置tabBar选中项的样式。

5.2.2 常见tabBar样式的wxss实现方法

接下来，我们将详细探讨几种常见的tabBar样式，并展示如何使用wxss来实现它们。

表格示例：

| 样式效果 | 描述 | wxss代码示例 | |----------|------|--------------| | 文字下划线 | 给tabBar文字添加下划线 | .tabbar-item:after { content: \"\"; display: block; border-bottom: 1px solid #1aad19; } | | 背景渐变 | tab项背景为渐变色 | .tabbar-item { background: linear-gradient(to bottom, #fff 0%, #f8f8f8 100%); } | | 阴影效果 | 添加阴影效果以突出tab项 | .tabbar-item { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); } |

通过上面的表格，我们能够一目了然地看到不同样式效果的描述和对应的wxss代码示例，方便开发者在实际项目中快速应用。

在本小节中，我们首先解释了wxss与css的基本规则和特点，并且详细说明了它们的联系和区别。然后，我们通过一系列的代码示例和参数说明，展示了如何使用wxss来定制tabBar样式，并提供了样式选择器在tabBar中的应用场景。此外，我们还提供了常见tabBar样式的wxss实现方法，并以表格形式总结了样式的描述和代码实现。希望这部分内容可以帮助小程序开发者更好地理解和应用wxss，以实现更加美观和功能完善的tabBar设计。

6. 示例中不同tabBar模式的展示和说明

在微信小程序中，tabBar的设计和实现通常会影响用户的使用体验，合理的tabBar模式能够增强应用的易用性和用户的黏性。本章将通过具体案例展示几种常见的tabBar模式，并详细解释其特点以及如何实现。

6.1 常见tabBar模式介绍

6.1.1 底部固定tabBar模式

底部固定tabBar是微信小程序中最常见的tabBar布局，它通常放置在页面的底部，方便用户随时切换页面。底部固定tabBar模式具有如下特点：

  • 始终处于用户视野内，容易被发现和点击。
  • 需要用户有良好的“下拉返回”手势操作习惯。
  • 固定位置会占用一定的屏幕空间，可能影响内容的显示。

在配置文件中实现底部固定tabBar模式，通常需要在app.json文件中添加tabBar配置，例如： 

{ \"tabBar\": { \"list\": [ { \"pagePath\": \"page1\", \"text\": \"首页\" }, { \"pagePath\": \"page2\", \"text\": \"分类\" }, // ... 更多tab项 ], \"color\": \"#999\", \"selectedColor\": \"#333\", \"backgroundColor\": \"#fff\", \"borderStyle\": \"black\" }}

6.1.2 顶部固定tabBar模式

顶部固定tabBar模式将tabBar放置在页面的顶部，这种设计在某些应用中也可提升用户体验。顶部固定tabBar模式具有以下特点：

  • 适合应用内容需要优先展示的情况，如文章阅读类应用。
  • 可能不符合用户对底部导航的普遍预期，需要一定的引导。
  • 在部分手机上有被导航栏遮挡的风险。

实现顶部固定tabBar模式，需要在app.json中指定tabBar的位置为top： 

{ \"tabBar\": { \"position\": \"top\", \"list\": [ // ... 和底部固定tabBar类似 ] }}

6.2 不同模式下的交互与用户体验

6.2.1 模式对用户操作的影响

不同的tabBar模式会导致用户在操作上有所差异。例如，顶部固定模式可能会因为用户习惯问题而导致一些误操作。在设计时，应考虑目标用户群体的操作习惯，并进行相应的用户测试，以优化用户体验。

6.2.2 优化交互体验的策略

为了提高用户体验，可以采取如下策略：

  • 在顶部固定tabBar模式中，考虑增加用户引导，明确告诉用户如何操作。
  • 通过动画和过渡效果，使tabBar的切换更加平滑，减少用户的操作顿挫感。
  • 根据不同的用户行为，动态调整tabBar的显示状态，例如，在用户进行特定操作时，暂时隐藏tabBar。

6.3 模式切换的实现方法

6.3.1 动态切换tabBar位置的代码示例

当需要在应用中动态切换tabBar的位置时，可以通过修改app.json中的配置来实现。具体代码示例： 

// 动态切换tabBar位置的函数function toggleTabBarPosition() { let appConfig = getApp().globalData.config; appConfig.tabBar.position = appConfig.tabBar.position === \"top\" ? \"bottom\" : \"top\"; getApp().globalData.config = appConfig; wx.setStorageSync(\'appConfig\', appConfig); wx.reLaunch({ url: \'/pages/index/index\' });}

此函数首先读取全局配置，修改tabBar的位置，并保存更改。随后，通过小程序的全局存储进行同步，并重新启动当前页面以刷新tabBar。

6.3.2 切换模式时的样式适配

切换tabBar模式时，除了位置的改变，可能还需要适配相应的样式。例如，从顶部固定切换到底部固定，需要改变tabBar的背景色和文字颜色以适应用户视觉习惯。这可以通过wxss和JavaScript结合实现： 

/* wxss样式文件中，根据不同模式设置不同的样式 */page { background-color: #f5f5f5;}.tabbar-position-top .tabbar { background-color: #fff;}.tabbar-position-bottom .tabbar { background-color: #333;}
// 根据当前tabBar的位置设置对应的类名function setTabBarPositionClass() { const tabbarPositionClass = getApp().globalData.config.tabBar.position === \"top\" ? \"tabbar-position-top\" : \"tabbar-position-bottom\"; wx.setStorageSync(\'tabbarPositionClass\', tabbarPositionClass); wx.createSelectorQuery().select(\'.tabbar\').boundingClientRect().exec((rect) => { wx.setStorageSync(\'tabbarRect\', rect[0]); });}

在此代码段中，先获取当前tabBar的位置状态，然后通过wxss动态地为tabBar添加不同的类名。通过这种方式，可以灵活地为不同位置的tabBar设置不同的样式，从而优化用户体验。

通过本章节的介绍，我们详细探讨了微信小程序中tabBar不同模式的实现方法，及其对用户体验的影响。希望这些内容能帮助开发者更加深入地理解tabBar设计的精髓，并在实际开发中灵活运用。

7. 深入理解tabBar性能优化与交互提升

7.1 tabBar性能优化的必要性

tabBar作为一个微信小程序中常见的界面元素，不仅承载着快速导航的功能，也影响着小程序的整体性能和用户体验。随着小程序功能的丰富和用户量的增加，性能优化成为了提升小程序稳定性和响应速度的重要环节。优化tabBar可以减少不必要的渲染，提高小程序的运行效率。

7.2 常见的tabBar性能问题

开发者在开发过程中经常会遇到一些tabBar性能问题，如tabBar元素的过度重绘和重排，页面切换时的卡顿，以及由于tabBar导致的内存消耗增加等。这些问题往往需要通过代码优化、合理的资源管理以及使用微信小程序提供的性能分析工具进行诊断和解决。

7.3 tabBar性能优化实践

优化tabBar涉及多个方面，其中以下几个方面尤为重要：

7.3.1 图片资源的优化

减少tabBar中图片资源的大小可以加快加载速度，提升性能。建议对图片进行压缩，并使用webp等现代格式，因为webp在保持较高画质的同时能够提供较小的文件体积。

7.3.2 减少动态样式切换

动态改变tabBar样式虽然可以提升视觉效果，但频繁的操作会消耗更多的计算资源。如果必须使用动态效果，建议只在关键交互时刻进行，并确保操作后的复原机制。

7.3.3 合理使用生命周期函数

在tabBar相关的页面中合理使用onLoad、onShow等生命周期函数，避免不必要的数据计算和渲染。例如，在onLoad时获取数据，onShow时进行数据处理，onHide时清除定时器和事件监听器等。

7.3.4 代码分离与按需加载

将tabBar相关代码与主逻辑代码分离，当用户进入相关页面时再加载tabBar代码。这样可以减少初次加载的资源消耗，提升启动速度。

7.4 提升交互体验的方法

除了性能优化，提升交互体验也是tabBar设计中的重要方面。这包括：

7.4.1 按需展示tabBar

根据用户的使用习惯或页面内容来决定是否展示tabBar。例如，在全屏视频或图片查看页面，可以暂时隐藏tabBar以提供更佳的沉浸式体验。

7.4.2 提供清晰的视觉反馈

当用户进行操作如点击或滑动时，通过视觉效果提供即时反馈，例如改变tabBar的选中颜色或加入动画效果。这能够引导用户完成操作，降低误操作的可能。

7.4.3 增加自定义交互效果

如通过JavaScript实现点击tabBar切换时的过渡动画，或者在tab切换时调整页面滚动位置，使得用户在切换tab时能感受到流畅的动画效果。

7.5 实际代码示例

以下是一个简单的示例，展示如何在tabBar组件中添加点击事件，并在点击后轻微改变颜色以提供视觉反馈。 

// 示例代码: 在页面的js文件中编写Page({ data: { current: 0 }, onLoad: function() { // 页面加载时执行的初始化操作 }, onTapTab: function(e) { // e.currentTarget.dataset.index 包含被点击tab的索引值 this.setData({ current: e.currentTarget.dataset.index }); // 轻微改变tabBar颜色，提供点击反馈 const color = e.currentTarget.dataset.index === this.data.current ? \'#FFFFFF\' : \'#000000\'; wx.setTabBarStyle({ color: color }); }});

在上述代码中，我们定义了一个名为 onTapTab 的函数，当用户点击某个tab时会被触发。我们通过 setData 改变了tab的选中状态，并且通过 wx.setTabBarStyle 更新了tab的颜色，从而为用户提供即时的视觉反馈。

在写代码时，务必要考虑到代码的执行效率和小程序的整体性能。上述代码仅为展示交互效果的一个例子，实际开发中还需要结合具体场景和需求进行优化调整。

本文还有配套的精品资源，点击获取 menu-r.4af5f7ec.gif

简介：本示例详细介绍了在微信小程序中如何实现和自定义 tabBar ，包括全局配置和页面特定配置的设置。通过修改 app.json 和 globalStyle ，以及使用 wxss 进行样式定制，开发者能够创建符合项目需求的个性化底部导航栏。同时提供了两种模式的示例，展示了如何根据具体需求调整 tabBar 样式和内容。

本文还有配套的精品资源，点击获取 menu-r.4af5f7ec.gif

网络标签：

相关问题