openDrawerLayout

打开一个抽屉式侧滑 window，可以从当前 window 的左右边缘滑动拉出侧滑 window。

此方法能够使用 openWin 方法的所有参数，在此基础上增加了 leftPane、rightPane 等参数，可以通过 api.closeWin()方法来关闭整个抽屉式侧滑。

实例widget下载地址

openDrawerLayout({params})

params

leftPane：

  • 类型：JSON 对象
  • 默认值：无
  • 描述：左边侧滑 window
  • 内部字段：
  1. {
  2.     edge:60,                            // 左边侧滑打开后，漏出的半透明区域宽度，默认值为60。此时左边侧滑window的宽度为屏幕宽度减去edge
  3.     name:'',                            // window名字（字符串类型）
  4.     url:'',                             // 页面地址，可以为本地文件路径，支持相对路径和绝对路径，以及widget://、fs://等协议路径，也可以为远程地址
  5.     pageParam:{},                       //（可选项）页面参数，页面中可以通过api.pageParam获取，JSON对象
  6.     bgColor:'',                         //（可选项）背景色，支持图片和颜色，格式为#fff、#ffffff、rgba(r,g,b,a)等，图片路径支持fs://、widget://等APICloud自定义文件路径协议，同时支持相对路径
  7.     bounces:false,                      //（可选项）是否弹动，默认值：若在 config.xml 里面配置了pageBounce，则默认值为配置的值，否则为false
  8.     scrollToTop:false,                  //（可选项）当点击状态栏，页面是否滚动到顶部。若当前屏幕上不止一个页面的scrollToTop属性为true，则所有的都不会起作用。默认值：true。只iOS有效
  9.     scrollEnabled:true                  //（可选项）页面内容超出后是否可以滚动，默认为true，只支持iOS
  10.     vScrollBarEnabled:true,             //（可选项）是否显示垂直滚动条，默认true 
  11.     hScrollBarEnabled:true,             //（可选项）是否显示水平滚动条，默认true
  12.     scaleEnabled:true,                  //（可选项）页面是否可以缩放，布尔型，默认值：false
  13.     allowEdit:false,                    //（可选项）是否允许长按页面时弹出选择菜单
  14.     softInputMode:'auto',               //（可选项）当键盘弹出时，输入框被盖住时，当前页面的调整方式，只iOS有效
  15.                                         //取值范围：
  16.                                         //resize      //若键盘盖住输入框，页面会自动上移
  17.                                         //pan         //若键盘盖住输入框，页面不会自动上移
  18.                                         //auto        //默认值，由系统决定如何处理，iOS平台该字段等同于resize
  19.     softInputBarEnabled:false,          //（可选项）是否显示键盘上方的工具条，布尔型，默认值：true，只iOS有效
  20.     defaultRefreshHeader:''             //（可选项）设置使用默认下拉刷新类型，取值范围：pull、swipe
  21.     customRefreshHeader:''              //（可选项）设置使用自定义下拉刷新模块的名称，设置后可以使用api.setCustomRefreshHeaderInfo方法来使用自定义下拉刷新组件
  22. }

rightPane：

  • 类型：JSON 对象
  • 默认值：无
  • 描述：右边侧滑 window
  • 内部字段：
  1. {
  2.     edge:60,                            // 右边侧滑打开后，漏出的半透明区域宽度，默认值为60。此时右边侧滑window的宽度为屏幕宽度减去edge
  3.     name:'',                            // window名字（字符串类型）
  4.     url:'',                             // 页面地址，可以为本地文件路径，支持相对路径和绝对路径，以及widget://、fs://等协议路径，也可以为远程地址
  5.     pageParam:{},                       //（可选项）页面参数，页面中可以通过api.pageParam获取，JSON对象
  6.     bgColor:'',                         //（可选项）背景色，支持图片和颜色，格式为#fff、#ffffff、rgba(r,g,b,a)等，图片路径支持fs://、widget://等APICloud自定义文件路径协议，同时支持相对路径
  7.     bounces:false,                      //（可选项）是否弹动，默认值：若在 config.xml 里面配置了pageBounce，则默认值为配置的值，否则为false
  8.     scrollToTop:false                   //（可选项）当点击状态栏，页面是否滚动到顶部。若当前屏幕上不止一个页面的scrollToTop属性为true，则所有的都不会起作用。默认值：true。只iOS有效
  9.     scrollEnabled:true                  //（可选项）页面内容超出后是否可以滚动，默认为true，只支持iOS
  10.     vScrollBarEnabled:true,             //（可选项）是否显示垂直滚动条，默认true 
  11.     hScrollBarEnabled:true,             //（可选项）是否显示水平滚动条，默认true
  12.     scaleEnabled:true,                  //（可选项）页面是否可以缩放，布尔型，默认值：false
  13.     allowEdit:false,                    //（可选项）是否允许长按页面时弹出选择菜单
  14.     softInputMode:'auto'                //（可选项）当键盘弹出时，输入框被盖住时，当前页面的调整方式，只iOS有效
  15.                                         //取值范围：
  16.                                         //resize       //若键盘盖住输入框，页面会自动上移
  17.                                         //pan          //若键盘盖住输入框，页面不会自动上移
  18.                                         //auto         //默认值，由系统决定如何处理，iOS平台该字段等同于resize
  19.     softInputBarEnabled:false,          //（可选项）是否显示键盘上方的工具条，布尔型，默认值：true，只iOS有效
  20.     defaultRefreshHeader:''             //（可选项）设置使用默认下拉刷新类型，取值范围：pull、swipe
  21.     customRefreshHeader:''              //（可选项）设置使用自定义下拉刷新模块的名称，设置后可以使用api.setCustomRefreshHeaderInfo方法来使用自定义下拉刷新组件
  22. }

slidToOpenPane：

  • 类型：布尔
  • 默认值：true
  • 描述：（可选项）是否支持在页面边缘处滑动打开drawerPane

slidToClosePane：

  • 类型：布尔
  • 默认值：true
  • 描述：（可选项）在打开的drawerPane页面，是否支持滑动关闭drawerPane

tapToClosePane：

  • 类型：布尔
  • 默认值：true
  • 描述：（可选项）在打开的drawerPane页面，是否支持点击遮罩部分关闭drawerPane

示例代码

  1. api.openDrawerLayout({
  2.     name: 'main',
  3.     url: './main.html',
  4.     animation: {
  5.         type: 'none'
  6.     },
  7.     leftPane: {
  8.         name: 'leftPane',
  9.         url: 'leftPane.html'
  10.     }
  11. });

可用性

iOS系统，Android系统

可提供的1.2.0及更高版本