openSlidLayout

2022-06-13 13:54 更新

打開側(cè)滑式布局

打開后,其所在 window 的 name 默認(rèn)為 slidLayout,所以關(guān)閉整個(gè)側(cè)滑布局可以通過 api.closeWin({name:'slidLayout'}) 實(shí)現(xiàn),同時(shí)可以通過 api.openWin({name:'slidLayout'})來把整個(gè)側(cè)滑顯示到最前面

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

params

type:

  • 類型:字符串
  • 默認(rèn)值:all
  • 描述:(可選項(xiàng))側(cè)滑類型(left:左側(cè)滑、right:右側(cè)滑、all:左右側(cè)滑)。安卓暫只支持left。

leftEdge:

  • 類型:數(shù)字
  • 默認(rèn)值:60
  • 描述:(可選項(xiàng))左側(cè)滑時(shí),側(cè)滑 window 停留時(shí)露出的寬度。即將廢棄,用 slidPaneStyle 中 leftEdge 參數(shù)代替

rightEdge:

  • 類型:數(shù)字
  • 默認(rèn)值:60
  • 描述:(可選項(xiàng))右側(cè)滑時(shí),側(cè)滑 window 停留時(shí)露出的寬度。即將廢棄,用 slidPaneStyle 中 rightEdge 參數(shù)代替

slidPaneStyle:

  • 類型:JSON 對象
  • 默認(rèn)值:無
  • 描述:側(cè)滑層 window 樣式
  • 內(nèi)部字段:

{
    leftEdge:           //(可選項(xiàng))左側(cè)滑時(shí),側(cè)滑window停留時(shí)露出的寬度,默認(rèn)60,數(shù)字類型
    rightEdge:          //(可選項(xiàng))右側(cè)滑時(shí),側(cè)滑window停留時(shí)露出的寬度,默認(rèn)60,數(shù)字類型
    leftScale:          //(可選項(xiàng))左側(cè)滑時(shí),側(cè)滑window移動時(shí)能縮放的最小倍數(shù),0-1.0,默認(rèn)1.0,數(shù)字類型,只支持iOS
    rightScale:         //(可選項(xiàng))右側(cè)滑時(shí),側(cè)滑window移動時(shí)能縮放的最小倍數(shù),0-1.0,默認(rèn)1.0,數(shù)字類型,只支持iOS
}

fixedPaneStyle:

  • 類型:JSON 對象
  • 默認(rèn)值:無
  • 描述:底部固定層 window 樣式
  • 內(nèi)部字段:

{
    leftEdge:           //(可選項(xiàng))左側(cè)滑時(shí),固定window能向左移動的最大寬度,默認(rèn)0,數(shù)字類型,只支持iOS
    rightEdge:          //(可選項(xiàng))右側(cè)滑時(shí),固定window能向右移動的最大寬度,默認(rèn)0,數(shù)字類型,只支持iOS
    leftScale:          //(可選項(xiàng))左側(cè)滑時(shí),固定window向左移動時(shí)能縮放的最小倍數(shù),0-1.0,默認(rèn)1.0,數(shù)字類型,只支持iOS
    rightScale:         //(可選項(xiàng))右側(cè)滑時(shí),固定window向右移動時(shí)能縮放的最小倍數(shù),0-1.0,默認(rèn)1.0,數(shù)字類型,只支持iOS
    leftMaskBg:         //(可選項(xiàng))左側(cè)滑時(shí),固定window上面的遮罩層背景,支持顏色和圖片,默認(rèn)rgba(0,0,0,0),字符串類型,只支持iOS
    rightMaskBg:        //(可選項(xiàng))右側(cè)滑時(shí),固定window上面的遮罩層背景,支持顏色和圖片,默認(rèn)rgba(0,0,0,0),字符串類型,只支持iOS
    leftBg:             //(可選項(xiàng))左側(cè)滑時(shí),固定window后面的背景,縮放過程中后面的背景將會顯示出來,支持顏色和圖片,默認(rèn)rgba(0,0,0,0),字符串類型,只支持iOS
    rightBg:            //(可選項(xiàng))右側(cè)滑時(shí),固定window后面的背景,縮放過程中后面的背景將會顯示出來,支持顏色和圖片,默認(rèn)rgba(0,0,0,0),字符串類型,只支持iOS
}

fixedPane:

  • 類型:JSON 對象
  • 默認(rèn)值:無
  • 描述:底部固定層 window
  • 內(nèi)部字段:

{
    name:'',                            // window名字(字符串類型)
    url:'',                             // 頁面地址,可以為本地文件路徑,支持相對路徑和絕對路徑,以及widget://、fs://等協(xié)議路徑,也可以為遠(yuǎn)程地址
    pageParam:{},                       //(可選項(xiàng))頁面參數(shù),頁面中可以通過api.pageParam獲取,JSON對象
    bgColor:'',                         //(可選項(xiàng))背景色,支持圖片和顏色,格式為#fff、#ffffff、rgba(r,g,b,a)等,圖片路徑支持fs://、widget://等APICloud自定義文件路徑協(xié)議,同時(shí)支持相對路徑
    bounces:false,                      //(可選項(xiàng))是否彈動,默認(rèn)值:若在 config.xml 里面配置了pageBounce,則默認(rèn)值為配置的值,否則為false
    scrollToTop:false                   //(可選項(xiàng))當(dāng)點(diǎn)擊狀態(tài)欄,頁面是否滾動到頂部。若當(dāng)前屏幕上不止一個(gè)頁面的scrollToTop屬性為true,則所有的都不會起作用。默認(rèn)值:true。只iOS有效
    scrollEnabled:true                  //(可選項(xiàng))頁面內(nèi)容超出后是否可以滾動,默認(rèn)為true,只支持iOS
    vScrollBarEnabled:true,             //(可選項(xiàng))是否顯示垂直滾動條,默認(rèn)true 
    hScrollBarEnabled:true,             //(可選項(xiàng))是否顯示水平滾動條,默認(rèn)true
    scaleEnabled:true,                  //(可選項(xiàng))頁面是否可以縮放,布爾型,默認(rèn)值:false
    allowEdit:false,                    //(可選項(xiàng))是否允許長按頁面時(shí)彈出選擇菜單
    softInputMode:'auto'                //(可選項(xiàng))當(dāng)鍵盤彈出時(shí),輸入框被蓋住時(shí),當(dāng)前頁面的調(diào)整方式,只iOS有效
                                        //取值范圍:
                                        //resize      //若鍵盤蓋住輸入框,頁面會自動上移
                                        //pan         //若鍵盤蓋住輸入框,頁面不會自動上移
                                        //auto        //默認(rèn)值,由系統(tǒng)決定如何處理,iOS平臺該字段等同于resize
    softInputBarEnabled:false,          //(可選項(xiàng))是否顯示鍵盤上方的工具條,布爾型,默認(rèn)值:true,只iOS有效
    defaultRefreshHeader:''             //(可選項(xiàng))設(shè)置使用默認(rèn)下拉刷新類型,取值范圍:pull、swipe
    customRefreshHeader:''              //(可選項(xiàng))設(shè)置使用自定義下拉刷新模塊的名稱,設(shè)置后可以使用api.setCustomRefreshHeaderInfo方法來使用自定義下拉刷新組件
}

slidPane:

  • 類型:JSON 對象
  • 默認(rèn)值:無
  • 描述:側(cè)滑層window
  • 內(nèi)部字段:

{
    name:'',                            // window名字(字符串類型)
    url:'',                             // 頁面地址,可以為本地文件路徑,支持相對路徑和絕對路徑,以及widget://、fs://等協(xié)議路徑,也可以為遠(yuǎn)程地址
    pageParam:{},                       //(可選項(xiàng))頁面參數(shù),頁面中可以通過api.pageParam獲取,JSON對象
    bgColor:'',                         //(可選項(xiàng))背景色,支持圖片和顏色,格式為#fff、#ffffff、rgba(r,g,b,a)等,圖片路徑支持fs://、widget://等APICloud自定義文件路徑協(xié)議,同時(shí)支持相對路徑
    bounces:false,                      //(可選項(xiàng))是否彈動,默認(rèn)值:若在 config.xml 里面配置了pageBounce,則默認(rèn)值為配置的值,否則為false
    scrollToTop:false                   //(可選項(xiàng))當(dāng)點(diǎn)擊狀態(tài)欄,頁面是否滾動到頂部。若當(dāng)前屏幕上不止一個(gè)頁面的scrollToTop屬性為true,則所有的都不會起作用。默認(rèn)值:true。只iOS有效
    scrollEnabled:true                  //(可選項(xiàng))頁面內(nèi)容超出后是否可以滾動,默認(rèn)為true,只支持iOS
    vScrollBarEnabled:true,             //(可選項(xiàng))是否顯示垂直滾動條,默認(rèn)true 
    hScrollBarEnabled:true,             //(可選項(xiàng))是否顯示水平滾動條,默認(rèn)true
    scaleEnabled:true,                  //(可選項(xiàng))頁面是否可以縮放,布爾型,默認(rèn)值:false
    allowEdit:false,                    //(可選項(xiàng))是否允許長按頁面時(shí)彈出選擇菜單
    softInputMode:'auto'                //(可選項(xiàng))當(dāng)鍵盤彈出時(shí),輸入框被蓋住時(shí),當(dāng)前頁面的調(diào)整方式,只iOS有效
                                        //取值范圍:
                                        //resize       //若鍵盤蓋住輸入框,頁面會自動上移
                                        //pan          //若鍵盤蓋住輸入框,頁面不會自動上移
                                        //auto         //默認(rèn)值,由系統(tǒng)決定如何處理,iOS平臺該字段等同于resize
    softInputBarEnabled:false,          //(可選項(xiàng))是否顯示鍵盤上方的工具條,布爾型,默認(rèn)值:true,只iOS有效
    defaultRefreshHeader:''             //(可選項(xiàng))設(shè)置使用默認(rèn)下拉刷新類型,取值范圍:pull、swipe
    customRefreshHeader:''              //(可選項(xiàng))設(shè)置使用自定義下拉刷新模塊的名稱,設(shè)置后可以使用api.setCustomRefreshHeaderInfo方法來使用自定義下拉刷新組件
}

callback(ret, err)

ret:

  • 類型:JSON 對象
  • 描述:手指頭觸摸屏幕,引起開始側(cè)滑時(shí)的回調(diào),左右側(cè)滑時(shí)應(yīng)該在這里面判斷顯示左邊頁面還是右邊頁面
  • 內(nèi)部字段:

{
    type: 'left'        //側(cè)滑方向,left或right
    event: 'slide'      //側(cè)滑事件,(slide-當(dāng)前處于滑動狀態(tài)、open-側(cè)滑打開狀態(tài)、close-側(cè)滑關(guān)閉狀態(tài)
}

示例代碼

api.openSlidLayout({
    type: 'left',
    fixedPane: {
        name: 'win1',
        url: 'win1.html'
    },
    slidPane: {
        name: 'win2',
        url: 'win2.html'
    }
}, function(ret, err) {


});

可用性

iOS系統(tǒng),Android系統(tǒng)

可提供的1.0.0及更高版本

以上內(nèi)容是否對您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號