diff --git a/docs/component/custom-tab-bar.md b/docs/component/custom-tab-bar.md
index 90b2ca6cb4b5752aecbef56aeed35cad2de65695..a8f7aef7b4ab95cd5bf449124bd12489e940e379 100644
--- a/docs/component/custom-tab-bar.md
+++ b/docs/component/custom-tab-bar.md
@@ -2,6 +2,14 @@
 
 自定义tabBar。
 
+该组件目前支持 ``pages.json`` 中 ``tabBar`` 相关配置， 其中不支持 ``borderStyle`` 配置
+
+该组件支持所有 ``tabBar`` 相关 API。
+
+**使用场景**
+
+适用于 app 宽屏适配(web)等场景，例如：已有 tabBar 的移动 App 适配 PC，可用 custom-tab-bar 组件将原来的 tabBar 的功能和逻辑快速转换为网页顶部的导航栏，实现快速适配 pc 网页，当页面路由跳转到tabBar页面时，自动高亮。
+
 **平台兼容性**
 
 __仅 H5 支持__，HBuilderX 2.9.9 + 。
@@ -36,9 +44,11 @@ __仅 H5 支持__，HBuilderX 2.9.9 + 。
 </template>
 ```
 
+组件水平布局（horizontal）时效果：
+
 ![uniapp](https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/5dc930c0-2580-11eb-8a36-ebb87efcf8c0.png)
 
-**Tips**
 
-- 该组件目前支持 ``pages.json`` 中 ``tabBar`` 相关配置， 其中不支持 ``borderStyle`` 配置
-- 该组件支持所有 ``tabBar`` 相关 API
+组件竖直布局（vertical）时效果：
+
+![uniapp](https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/0f8ca2e0-2592-11eb-8a36-ebb87efcf8c0.png)