html好看的侧滑效果,H5 - 侧滑效果实现

最新推荐文章于 2021-06-20 01:34:50 发布

赶路的稻草人

最新推荐文章于 2021-06-20 01:34:50 发布

阅读量531

点赞数

文章标签： html好看的侧滑效果

本文详细介绍了如何使用APICloud实现侧滑界面的打开、关闭及交互功能。通过api.openDrawerLayout和api.openDrawerPane方法可以分别打开侧滑界面和弹出侧滑菜单，而api.closeDrawerPane则用于关闭侧滑菜单。示例代码展示了cehua.html和cehua_right.html两个页面的样式设置和事件处理，包括点击事件和状态栏修复。侧滑界面包含动态加载的数据列表，点击列表项可以改变选中状态并关闭侧滑菜单。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1ff79e02b566

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;

}

标题

这是标题

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();

}