输入关键字搜索
开发者能力认证
鸿蒙高校创新赛
HarmonyOS 7
animation
HarmonyOS行业解决方案
layoutWeight
HarmonyOS模板&组件
bindPopup
bindsheet
CTRL+K
文档管理中心

快应用

输入关键字搜索
开发者能力认证
鸿蒙高校创新赛
HarmonyOS 7
animation
HarmonyOS行业解决方案
layoutWeight
HarmonyOS模板&组件
bindPopup
bindsheet
CTRL+K
指南
指南快应用专题框架自定义组件抽屉组件

抽屉组件

更新时间: 2024-03-07 06:45
本文导读
展开章节

简介

抽屉组件是一种特殊的弹出面板，可以模拟手机App中拉出、推入抽屉的效果。抽屉一般具有如下特点：

  • 抽屉可显示在左边，也可显示在右边
  • 抽屉宽度可定制
  • 抽屉有遮罩层，点击遮罩层可收起抽屉
  • 手势滑动可呼出抽屉

抽屉（drawer）组件结构分为控制器（controls）和抽屉内容（content）两部分。一般来说，controls都是按钮、图标之类的可点击的组件，类似真实抽屉的把手；content是抽屉内部的东西，每个抽屉的content都是不一样的。点击controls可以触发content的展开和收起。布局结构如下图：

布局代码如下：

收起
自动换行
深色代码主题
复制
  1. <div class="page">
  2.    <div class="controls">
  3.      <image></image>
  4.     </div>
  5.    <stack class="drawer_container">
  6.        <div class="page_content">
  7.           …
  8.        </div>
  9.         <drawer class="drawer">
  10.            <div class="content"> 
  11.             …
  12.             </div>
  13.          </drawer >
  14.    </stack>
  15. </div>

开发指引

自定义子组件

  1. 定义布局样式。

    抽屉外观都是通用的，但是抽屉内部格局content不一样，在设计的时候，不能把content布局固定，否则一旦content部分的UI有变化，会导致子组件也要修改，违背了代码设计中的“开闭”原则。

    所以，在子组件drawer.ux中，使用slot 组件来承载父组件中定义的content，由使用drawer组件的页面来完成content布局，如下代码所示：

    收起
    自动换行
    深色代码主题
    复制
    1. <template>
    2.     <div id="drawercontent" style="display:flex;position:absolute;width:100%;height:100%;top:0;left:0;bottom: 0; flex-direction: {{flexdirection}}" >
    3.        <div class="{{maskstyle}}" onclick="close('mask')"></div>
    4.         <div id="unidrawercontent" class="{{unidrawerstyle}}" style="width:{{drawerWidth}}+'px'}">
    5.             <slot></slot>
    6.         </div>
    7.     </div>
    8. </template>
  2. 规划属性和支持的事件。

    支持的属性：

    展开

    属性

    类型

    默认值

    描述

    mode

    String

    left

    抽屉的显示位置，支持left和right。

    width

    Number

    320px

    抽屉的宽度。

    mask

    Boolean

    true

    抽屉展开时是否显示遮罩层。

    maskClick

    Boolean

    true

    点击遮罩层是否关闭抽屉。

    支持的事件：

    展开

    事件名称

    参数

    描述

    drawerchange

    {showDrawer：booleanValue}

    抽屉展开、收起的回调事件。

实现抽屉展开和收起

  1. 抽屉默认是关闭不显示的，通过“display: none;”来隐藏。
  2. 通过X轴的平移动画控制展开、收起。

    展开时，移到可视区域；收起时，移到屏幕之外。不管是展开还是收起，都是平滑的动画效果，代码如下。

    左抽屉展开、收起动画：

    收起
    自动换行
    深色代码主题
    复制
    1. @keyframes translateX {
    2.     from {
    3.         transform: translateX(-110px);
    4.     }
    5. 

    6.     to {
    7.         transform: translateX(0px);
    8.     }
    9. }
    10. 

    11. @keyframes translateXReverse {
    12.     from {
    13.         transform: translateX(0px);
    14.     }
    15. 

    16.     to {
    17.         transform: translateX(-750px);
    18.     }
    19. }

    右抽屉展开、收起动画：

    收起
    自动换行
    深色代码主题
    复制
    1. @keyframes translateXRight {
    2.     from {
    3.         transform: translateX(300px);
    4.     }
    5. 

    6.     to {
    7.         transform: translateX(0px);
    8.     }
    9. }
    10. 

    11. @keyframes translateXRightReverse {
    12.     from {
    13.         transform: translateX(0px);
    14.     }
    15. 

    16.     to {
    17.         transform: translateX(750px);
    18.     }
    19. }
  3. 通过div的flex-direction属性控制抽屉显示在左侧还是右侧。显示在左侧时，设置为“row”。显示在右侧时，设置为“row-reverse”。
    收起
    自动换行
    深色代码主题
    复制
    1.         onInit() {
    2.             console.info("drawer oninit");
    3.             this.$on('broaddrawerstate', this.drawerStateEvt);
    4.             this.drawerWidth = this.width;
    5.             if(this.mode=="left"){
    6.                 this.flexdirection="row";
    7.             }else{
    8.                 this.flexdirection="row-reverse";
    9.             }
    10.             this.$watch('mode', 'onDrawerModeChange');
    11.         },
    本文默认抽屉显示在左侧，左抽屉展开、收起的style代码如下：
    收起
    自动换行
    深色代码主题
    复制
    1. .uni-drawer-open-left {
    2.     display: flex;
    3.     height: 100%;
    4.     animation-name: translateX;
    5.     animation-timing-function: linear;
    6.     animation-fill-mode: forwards;
    7.     animation-duration: 300ms;
    8. }
    9. 

    10. .uni-drawer-closed-left {
    11.     display: flex;
    12.     height: 100%;
    13.     animation-name: translateXReverse;
    14.     animation-timing-function: linear;
    15.     animation-fill-mode: forwards;
    16.     animation-duration: 600ms;
    17. }

    当设置flex-direction: row-reverse时，抽屉显示在右侧。右抽屉展开、收起的style代码如下：

    收起
    自动换行
    深色代码主题
    复制
    1. .uni-drawer-open-right {
    2.     display: flex;
    3.     height: 100%;
    4.     flex-direction: row-reverse;
    5.     animation-name: translateXRight;
    6.     animation-timing-function: linear;
    7.     animation-fill-mode: forwards;
    8.     animation-duration: 300ms;
    9. }
    10. 

    11. .uni-drawer-closed-right {
    12.     display: flex;
    13.     height: 100%;
    14.     flex-direction: row-reverse;
    15.     animation-name: translateXRightReverse;
    16.     animation-timing-function: linear;
    17.     animation-fill-mode: forwards;
    18.     animation-duration: 600ms;
    19. }

实现遮罩层

遮罩层初始状态不显示，通过“display: none;”来隐藏。抽屉展示时，显示遮罩层，收起时不显示。遮罩层使用透明度实现，代码如下：

收起
自动换行
深色代码主题
复制
  1. .uni-mask-open {
  2.     display: flex;
  3.     height: 100%;
  4.     width: 100%;
  5.     position: absolute;
  6.     background-color: rgb(0, 0, 0);
  7.     opacity: 0.4;
  8. }
  9. .uni-mask-closed {
  10.     height: 100%;
  11.     width: 100%;
  12.     position: absolute;
  13.     background-color: rgb(0, 0, 0);
  14.     display: none;
  15. }

父子组件通信

  1. 父组件通过parentVm.$broadcast()向子组件传递抽屉展开、收起的事件，子组件通过$on()监听事件和参数。
  2. 子组件通过$watch()方法监听抽屉显示模式mode属性的变化，从而修改css样式，让其在正确的位置显示抽屉。
  3. 子组件通过drawerchange事件及参数通知父组件。

手势滑动呼出抽屉

通过监听touchstart和touchend事件，可以实现在屏幕边缘处手势滑动呼出抽屉。

示例代码

抽屉drawer.ux代码：

收起
自动换行
深色代码主题
复制
  1. <template>
  2.     <div id="drawercontent" style="display:flex;position:absolute;width:100%;height:100%;top:0;left:0;bottom: 0; flex-direction: {{flexdirection}}" onswipe="dealDrawerSwipe">
  3.        <div class="{{maskstyle}}" onclick="close('mask')"></div>
  4.         <div id="unidrawercontent" class="{{unidrawerstyle}}" style="width:{{drawerWidth}}+'px'}">
  5.             <slot></slot>
  6.         </div>
  7.     </div>
  8. </template>
  10. <style>
  11.     .stack {
  12.         flex-direction: column;
  13.         height: 100%;
  14.         width: 100%;
  15.     }
  17.     .uni-mask-open {
  18.         display: flex;
  19.         height: 100%;
  20.         width: 100%;
  21.         position: absolute;
  22.         background-color: rgb(0, 0, 0);
  23.         opacity: 0.4;
  24.     }
  25.     .uni-mask-closed {
  26.         height: 100%;
  27.         width: 100%;
  28.         position: absolute;
  29.         background-color: rgb(0, 0, 0);
  30.         display: none;
  31.     }
  33.     .uni-drawer {
  34.         display: none;
  35.         height: 100%;
  36.     }
  38.     .uni-drawer-open-left {
  39.         display: flex;
  40.         height: 100%;
  41.         animation-name: translateX;
  42.         animation-timing-function: linear;
  43.         animation-fill-mode: forwards;
  44.         animation-duration: 300ms;
  45.     }
  47.     .uni-drawer-closed-left {
  48.         display: flex;
  49.         height: 100%;
  50.         animation-name: translateXReverse;
  51.         animation-timing-function: linear;
  52.         animation-fill-mode: forwards;
  53.         animation-duration: 600ms;
  54.     }
  56.     .uni-drawer-open-right {
  57.         display: flex;
  58.         height: 100%;
  59.         flex-direction: row-reverse;
  60.         animation-name: translateXRight;
  61.         animation-timing-function: linear;
  62.         animation-fill-mode: forwards;
  63.         animation-duration: 300ms;
  64.     }
  66.     .uni-drawer-closed-right {
  67.         display: flex;
  68.         height: 100%;
  69.         flex-direction: row-reverse;
  70.         animation-name: translateXRightReverse;
  71.         animation-timing-function: linear;
  72.         animation-fill-mode: forwards;
  73.         animation-duration: 600ms;
  74.     }
  76.     @keyframes translateX {
  77.         from {
  78.             transform: translateX(-110px);
  79.         }
  81.         to {
  82.             transform: translateX(0px);
  83.         }
  84.     }
  86.     @keyframes translateXReverse {
  87.         from {
  88.             transform: translateX(0px);
  89.         }
  91.         to {
  92.             transform: translateX(-750px);
  93.         }
  94.     }
  96.     @keyframes translateXRight {
  97.         from {
  98.             transform: translateX(300px);
  99.         }
  101.         to {
  102.             transform: translateX(0px);
  103.         }
  104.     }
  106.     @keyframes translateXRightReverse {
  107.         from {
  108.             transform: translateX(0px);
  109.         }
  111.         to {
  112.             transform: translateX(750px);
  113.         }
  114.     }
  115. </style>
  117. <script>
  118.     module.exports = {
  119.         props: {
  120.             /**
  121.              * 显示模式（左、右），只在初始化生效
  122.              */
  123.             mode: {
  124.                 type: String,
  125.                 default: ''
  126.             },
  127.             /**
  128.              * 蒙层显示状态
  129.              */
  130.             mask: {
  131.                 type: Boolean,
  132.                 default: true
  133.             },
  134.             /**
  135.              * 遮罩是否可点击关闭
  136.              */
  137.             maskClick: {
  138.                 type: Boolean,
  139.                 default: true
  140.             },
  141.             /**
  142.              * 抽屉宽度
  143.              */
  144.             width: {
  145.                 type: Number,
  146.                 default: 320
  147.             }
  148.         },
  149.         data() {
  150.             return {
  151.                 visibleSync: false,
  152.                 showDrawer: false,
  153.                 watchTimer: null,
  154.                 drawerWidth: 600,
  155.                 maskstyle: 'uni-mask-closed',
  156.                 unidrawerstyle: 'uni-drawer',
  157.                 flexdirection: 'row'
  159.             }
  160.         },
  161.         onInit() {
  162.             console.info("drawer oninit");
  163.             this.$on('broaddrawerstate', this.drawerStateEvt);
  164.             this.drawerWidth = this.width;
  165.             if(this.mode=="left"){
  166.                 this.flexdirection="row";
  167.             }else{
  168.                 this.flexdirection="row-reverse";
  169.             }
  170.             this.$watch('mode', 'onDrawerModeChange');
  171.         },
  173.         onDrawerModeChange: function (newValue, oldValue) {
  174.             console.info("onDrawerModeChange newValue= " + newValue 
  175.             + ", oldValue=" + oldValue);
  176.             if (newValue == 'left') {
  177.                 this.flexdirection = 'row';
  178.             } else {
  179.                 this.flexdirection = 'row-reverse';
  180.             }
  181.         },
  183.         drawerStateEvt(evt) {
  184.             this.showDrawer = evt.detail.isOpen;
  185.             console.info("drawerStateEvt  this.showDrawer= " + this.showDrawer);
  186.             if (this.showDrawer) {
  187.                 this.open();
  188.             } else {
  189.                 this.close();
  190.             }
  191.         },
  192.         close(type) {
  193.             // 抽屉尚未完全关闭或遮罩禁止点击时不触发以下逻辑
  194.             if ((type == 'mask' && !this.maskClick) || !this.visibleSync) {
  195.                 return;
  196.             }
  197.             console.info("close");
  198.             this.maskstyle = 'uni-mask-closed';
  199.             if (this.mode == "left") {
  201.                 this.unidrawerstyle = 'uni-drawer-closed-left';
  202.             } else {
  203.                 this.unidrawerstyle = 'uni-drawer-closed-right';
  204.             }
  206.             this._change('showDrawer', 'visibleSync', false)
  207.         },
  208.         open() {
  209.             // 处理重复点击展开的事件
  210.             if (this.visibleSync) {
  211.                 return;
  212.             }
  213.             console.info("open this.mode="+this.mode);
  214.             this.maskstyle = 'uni-mask-open';
  215.             if (this.mode == "left") {
  216.                 this.unidrawerstyle = 'uni-drawer-open-left';
  217.             } else {
  218.                 this.unidrawerstyle = 'uni-drawer-open-right';
  219.             }
  221.             this._change('visibleSync', 'showDrawer', true)
  222.         },
  223.         _change(param1, param2, status) {
  224.             this[param1] = status;
  225.             if (this.watchTimer) {
  226.                 clearTimeout(this.watchTimer);
  227.             }
  228.             this.watchTimer = setTimeout(() => {
  229.                 this[param2] = status;
  230.                 this.$emit('drawerchange', {'showDrawer':status});
  231.             }, status ? 50 : 300)
  232.         },
  233.         dealDrawerSwipe: function(e) {
  234.             console.info("dealDrawerSwipe");
  235.             let direction=e.direction;
  236.                 if (this.mode == "left") {
  237.                      if(direction=="left"){
  238.                         this.close();
  239.                      }
  240.                 }else{
  241.                    if(direction=="right"){
  242.                          this.close();
  243.                      }
  244.                 }
  245.             },
  246.     }
  247. </script>

页面hello.ux代码：

收起
自动换行
深色代码主题
复制
  1. <import name="drawer" src="../Drawer/drawer.ux"></import>
  2. <template>
  3.   <!-- Only one root node is allowed in template. -->
  4.   <div class="container">
  5.     <div class="title">
  6.       <div class="icon" @click="isOpen">
  7.         <text class="icon-item" for="[1,1,1,1]"></text>
  8.       </div>
  9.       <text class="page-title">drawer组件</text>
  10.     </div>
  11.     <stack style="width: 100%;height:100%;" ontouchstart="touchstart" ontouchend="touchend">
  12.       <div class="content">
  13.         <text style="color: #0faeff;">点击左上角按钮滑出左侧抽屉</text>
  14.         <text class="txt" onclick="switchLocation">切换抽屉滑出位置左或右</text>
  15.         <text style="color: #0faeff;margin-left: 10px;margin-right: 10px">手指在屏幕左侧边缘右滑亦可滑出左侧抽屉，手指在屏幕右侧边缘左滑亦可滑出右侧抽屉</text>
  16.         <text style="color: #0faeff;margin-top: 20px;margin-left: 10px;margin-right: 10px">滑出抽屉的宽度默认为320px，如果输入的值超出600则按最大可设置宽度600px显示，小于300则按最小可设置宽度300px显示</text>
  17.         <input id="input" class="input" type="number" placeholder="请输入宽度值，单位为px" value="{{inputValue}}" onchange="changeValue" />
  18.         <text style="color: #0faeff;">键盘收起后，即可滑动或点击呼出抽屉</text>
  19.         <text class="txt" onclick="maxWidth">设置抽屉为最大宽度</text>
  20.         <text class="txt" onclick="minWidth">设置抽屉为最小宽度</text>
  21.       </div>
  23.       <drawer id="drawer" mode="{{drawerShowMode}}" width="{{drawerWidth}}" mask-click="true" @drawerchange="change">
  24.         <tabs class="tabs" style="width: {{drawerWidth}}px;">
  25.           <tab-content class="tabcontent">
  26.             <list class="list">
  27.               <block for="listarray">
  28.                 <list-item class="list-item" type="item" onclick="chooseItem($idx)">
  29.                   <text>第{{ $item }}章测试目录</text>
  30.                 </list-item>
  31.               </block>
  32.             </list>
  33.             <text>this is second page</text>
  34.           </tab-content>
  35.           <tab-bar class="tabbar">
  36.             <text class="text">part one</text>
  37.             <text class="text">part two</text>
  38.           </tab-bar>
  39.         </tabs>
  40.       </drawer>
  41.     </stack>
  42.   </div>
  43. </template>
  44. 

  45. <style>
  46.   .container {
  47.     flex-direction: column;
  48.   }
  49.   /* 自定义内容属性 */
  50.   .content {
  51.     flex-direction: column;
  52.     justify-content: center;
  53.     align-items: center;
  54.     width: 100%;
  55.     height: 100%;
  56.   }
  57.   .txt {
  58.     width: 80%;
  59.     height: 80px;
  60.     background-color: #0faeff;
  61.     border-radius: 10px;
  62.     text-align: center;
  63.     margin-left: 80px;
  64.     margin-top: 10px;
  65.     margin-bottom: 10px;
  66.   }
  67.   .input {
  68.     width: 80%;
  69.     height: 80px;
  70.     border: 1px solid #000000;
  71.     margin-left: 80px;
  72.   }
  73.   /* 标题属性 */
  74.   .title {
  75.     height: 120px;
  76.     width: 100%;
  77.     align-items: center;
  78.     background-color: #0faeff;
  79.     padding-left: 20px;
  80.   }
  81.   .page-title {
  82.     font-size: 40px;
  83.     padding-left: 150px;
  84.   }
  85.   .icon {
  86.     width: 60px;
  87.     height: 60px;
  88.     flex-direction: column;
  89.     justify-content: space-around;
  90.   }
  91.   .icon-item {
  92.     height: 4px;
  93.     background-color: rgb(212, 212, 212);
  94.     width: 100%;
  95.   }
  97.   .tabs {
  98.     height: 100%;
  99.     background-color: rgb(248, 230, 230);
  100.   }
  101.   .tabcontent {
  102.     width: 100%;
  103.     height: 90%;
  104.   }
  105.   .tabbar {
  106.     width: 100%;
  107.     height: 10%;
  108.   }
  109.   .text {
  110.     width: 50%;
  111.     height: 100%;
  112.     font-size: 50px;
  113.     text-align: center;
  114.   }
  115.   .list {
  116.     flex: 1;
  117.     width: 100%;
  118.   }
  119.   .list-item {
  120.     height: 90px;
  121.     width: 100%;
  122.     padding: 0px 20px;
  123.     border-bottom: 1px solid #f0f0f0;
  124.     align-items: center;
  125.     justify-content: space-between;
  126.   }
  127. </style>
  128. 

  129. <script>
  130.   import prompt from '@system.prompt';
  131.   module.exports = {
  132.     data: {
  133.       componentData: {},
  134.       display: false,
  135.       listarray: '',
  136.       drawerWidth: 360,
  137.       inputValue: '',
  138.       drawerShowMode: 'right',
  139.       movestartX: 0
  140.     },
  142.     onInit() {
  143.       this.listarray = this.getList(20);
  144.     },
  146.     isOpen() {
  147.       this.display = !this.display;
  148.       if (this.display) {
  149.         this.showDrawer();
  150.       } else {
  151.         this.closeDrawer();
  152.       }
  153.     },
  154.     // 打开抽屉
  155.     showDrawer(e) {
  156.       this.$broadcast('broaddrawerstate', {
  157.         isOpen: true
  158.       })
  159.     },
  160.     // 关闭抽屉
  161.     closeDrawer(e) {
  162.       this.$broadcast('broaddrawerstate', {
  163.         isOpen: false
  164.       })
  165.     },
  166.     // 抽屉状态发生变化触发
  167.     change(e) {
  168.       console.info("change e=" + JSON.stringify(e));
  169.       this.display = e.detail.showDrawer;
  170.     },
  172.     getList(num) {
  173.       let list = []
  174.       for (let i = 1; i <= num; i++) {
  175.         list.push(i)
  176.       }
  177.       return list
  178.     },
  180.     switchLocation() {
  181.       if (this.drawerShowMode == 'left') {
  182.         this.drawerShowMode = 'right';
  183.       } else {
  184.         this.drawerShowMode = 'left';
  185.       }
  186.     },
  187.     changeValue(e) {
  188.       if (e.value >= 600) {
  189.         this.drawerWidth = 600
  190.       } else if (e.value <= 300) {
  191.         this.drawerWidth = 300
  192.       } else {
  193.         this.drawerWidth = e.value
  194.       }
  195.       console.log("record", this.drawerWidth);
  196.       if (e.value.length === 3) {
  197.         this.$element('input').focus({ focus: false })
  198.       }
  199.     },
  200.     maxWidth() {
  201.       this.drawerWidth = 600
  202.     },
  203.     minWidth() {
  204.       this.drawerWidth = 300
  205.     },
  207.     chooseItem(index) {
  208.       prompt.showToast({
  209.         message: `该内容为简单示例，点击了第${index + 1}条`,
  210.       })
  211.     },
  212.     touchstart(e) {
  213.       console.info("touchstart");
  214.       this.movestartX = e.touches[0].offsetX;
  215.     },
  216.     touchend(e) {
  217.       console.info("touch end e:" + JSON.stringify(e));
  218.       let moveEndX = e.changedTouches[0].offsetX;
  219.       if (this.drawerShowMode == "left") {
  220.         //在屏幕左边缘从左往右边滑动时，呼出抽屉
  221.         if (this.movestartX < 30) {
  222.           let dis = moveEndX - this.movestartX;
  223.           if (dis > 30) {
  224.             this.showDrawer();
  225.           }
  226.         }
  227.       } else {
  228.         //在屏幕右边缘从右往左边滑动时，呼出抽屉
  229.         if (this.movestartX > 720) {
  230.           let dis = moveEndX - this.movestartX;
  231.           if (dis < -30) {
  232.             this.showDrawer();
  233.           }
  234.         }
  235.       }
  236.     },
  237.   }
  238. </script>
自定义组件
倒计时组件
简体中文
华为开发者联盟 版权所有 ©2026
问题反馈
使用条款
华为开发者联盟用户协议
关于华为开发者联盟与隐私的声明
Cookies
开源软件声明
在 指南 中进行搜索
请输入您想要搜索的关键词