openSlidLayout

打开侧滑式布局

打开后，其所在 window 的 name 默认为 slidLayout，所以关闭整个侧滑布局可以通过 api.closeWin({name:’slidLayout’}) 实现，同时可以通过 api.openWin({name:’slidLayout’})来把整个侧滑显示到最前面

openSlidLayout({params}, callback(ret, err))

params

type：

  • 类型：字符串
  • 默认值：all
  • 描述：（可选项）侧滑类型（left：左侧滑、right：右侧滑、all：左右侧滑）。安卓暂只支持left。

leftEdge：

  • 类型：数字
  • 默认值：60
  • 描述：（可选项）左侧滑时，侧滑 window 停留时露出的宽度。即将废弃，用 slidPaneStyle 中 leftEdge 参数代替

rightEdge：

  • 类型：数字
  • 默认值：60
  • 描述：（可选项）右侧滑时，侧滑 window 停留时露出的宽度。即将废弃，用 slidPaneStyle 中 rightEdge 参数代替

slidPaneStyle：

  • 类型：JSON 对象
  • 默认值：无
  • 描述：侧滑层 window 样式
  • 内部字段：
  1. {
  2.     leftEdge:           //（可选项）左侧滑时，侧滑window停留时露出的宽度，默认60，数字类型
  3.     rightEdge:          //（可选项）右侧滑时，侧滑window停留时露出的宽度，默认60，数字类型
  4.     leftScale:          //（可选项）左侧滑时，侧滑window移动时能缩放的最小倍数，0-1.0，默认1.0，数字类型，只支持iOS
  5.     rightScale:         //（可选项）右侧滑时，侧滑window移动时能缩放的最小倍数，0-1.0，默认1.0，数字类型，只支持iOS
  6. }

fixedPaneStyle：

  • 类型：JSON 对象
  • 默认值：无
  • 描述：底部固定层 window 样式
  • 内部字段：
  1. {
  2.     leftEdge:           //（可选项）左侧滑时，固定window能向左移动的最大宽度，默认0，数字类型，只支持iOS
  3.     rightEdge:          //（可选项）右侧滑时，固定window能向右移动的最大宽度，默认0，数字类型，只支持iOS
  4.     leftScale:          //（可选项）左侧滑时，固定window向左移动时能缩放的最小倍数，0-1.0，默认1.0，数字类型，只支持iOS
  5.     rightScale:         //（可选项）右侧滑时，固定window向右移动时能缩放的最小倍数，0-1.0，默认1.0，数字类型，只支持iOS
  6.     leftMaskBg:         //（可选项）左侧滑时，固定window上面的遮罩层背景，支持颜色和图片，默认rgba(0,0,0,0)，字符串类型，只支持iOS
  7.     rightMaskBg:        //（可选项）右侧滑时，固定window上面的遮罩层背景，支持颜色和图片，默认rgba(0,0,0,0)，字符串类型，只支持iOS
  8.     leftBg:             //（可选项）左侧滑时，固定window后面的背景，缩放过程中后面的背景将会显示出来，支持颜色和图片，默认rgba(0,0,0,0)，字符串类型，只支持iOS
  9.     rightBg:            //（可选项）右侧滑时，固定window后面的背景，缩放过程中后面的背景将会显示出来，支持颜色和图片，默认rgba(0,0,0,0)，字符串类型，只支持iOS
  10. }

fixedPane：

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

slidPane：

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

callback(ret, err)

ret：

  • 类型：JSON 对象
  • 描述：手指头触摸屏幕，引起开始侧滑时的回调，左右侧滑时应该在这里面判断显示左边页面还是右边页面
  • 内部字段：
  1. {
  2.     type: 'left'        //侧滑方向，left或right
  3.     event: 'slide'      //侧滑事件，（slide-当前处于滑动状态、open-侧滑打开状态、close-侧滑关闭状态
  4. }

示例代码

  1. api.openSlidLayout({
  2.     type: 'left',
  3.     fixedPane: {
  4.         name: 'win1',
  5.         url: 'win1.html'
  6.     },
  7.     slidPane: {
  8.         name: 'win2',
  9.         url: 'win2.html'
  10.     }
  11. }, function(ret, err) {
  13. });

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本