cehua.gif

APICloud 跳到侧滑界面父界面的方法：openDrawerLayout

APICloud 弹出侧滑界面方法： openDrawerPane

APICloud 关闭弹出的侧滑界面： closeDrawerPane

cehua.html 是承载侧滑界面的父页面，cehua_right.html是要弹出的侧滑界面

api.openDrawerLayout({

name: 'cehua',

url: './cehua.html',

animation: {

type: 'push'

},

rightPane: {

name: 'cehua_right',

url: './cehua_right.html',

}

});

cehua.html

侧滑承载界面

.aui-bar{

background: #45C01A;

}

apiready = function(){

$api.fixStatusBar($api.byId('header'));

}

function closeWin(){

api.closeWin({

});

}

function clickNavRightItem(){

console.log("点击侧滑按钮");

api.openDrawerPane({

type: 'right'

});

}

cehua_right.html

侧滑

body {

background: #001041;

}

html {

background: #001041;

}

.aui-bar {

background: #001041;

}

.title {

color: white;

font-size: 20px;

}

.cell_BgColor {

background: #001041;

}

.bgCell {

padding-left: 15px;

height: 60px;

line-height: 60px;

vertical-align: middle;

cursor: pointer;

/*border: 1px solid white;*/

}

.line {

border-bottom: 1px solid white;

}

.name {

color: white;

font-size: 18px;

}

.clickSelColor {

color: red;

background: yellow;

}

标题

{{each }}

{{/each}}

apiready = function() {

$api.fixStatusBar($api.byId('header'));

var ALLData = [{

"id": "1",

"name": "信息1",

}, {

"id": "2",

"name": "信息2",

}, {

"id": "3",

"name": "信息3",

}, {

"id": "4",

"name": "信息4",

}];

let html = template('template', ALLData);

$api.html($api.byId('CellList'), html);

api.parseTapmode();

var items = $api.domAll(".name");

if ($api.hasCls(items[0], 'clickSelColor') == false) {

$api.addCls(items[0], 'clickSelColor');

}

}

function clickItem(id) {

console.log("id---"+id);

var items = $api.domAll(".name");

for (var i = 0; i < items.length; i++) {

if ( $api.hasCls(items[i], 'clickSelColor') ){

$api.removeCls(items[i],'clickSelColor');

}

}

var item= $api.byId(id);

$api.addCls(item,'clickSelColor');

api.closeDrawerPane();

}