H5页面仿原生列表会话左滑显示删除键/编辑键--局部滑动
页面滑动原理主要是用了一个左滑手势,需要在页面中引入jquery.mobile-1.4.5.min.js这个插件。
<script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
页面文件之间的管理用的是 sea.js 框架.
效果图如下:
1.1 HTML 文件:
<!DOCTYPE html>
<html>
<head>
<!-- iOS中数字变成电话的问题 -->
<meta name="format-detection" content="telephone=no"/>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />
<title>通讯录</title>
<link type="text/css" rel="stylesheet" href="../../statics/css/common/common.css" />
<link type="text/css" rel="stylesheet" href="../../statics/css/manager/friends.css" />
<script>
var fontSize = 100;
var elm = document.documentElement;
elm.style.fontSize = fontSize * (elm.clientWidth/320) + 'px';
</script>
</head>
<body>
<header class="head-view">
<span id="back-btn">< 返回</span>
<span id="add">添加</span>
</header>
<!-- 局部滑动 -->
<ul class="part-view">
{{each}}
<li class="item">
<div class="left-view">
<div class="avatar"><img src="../../statics/images/avatar.png"></div>
<div class="nickname">小明</div>
</div>
<div class="right-view">
<div class="right-view-item">
<div class="text"><span>共享了3个相册</span></div>
<div class="icons">
<span class="edit"><i></i></span>
<span class="delete"><i></i></span>
</div>
</div>
</div>
</li>
{{/each}}
</ul>
<!-- 局部滑动模板 -->
<script type="text/html" id="part-view-template">
{{each}}
<li class="item">
<div class="left-view">
<div class="avatar"><img src="../../statics/images/avatar.png"></div>
<div class="nickname">小明</div>
</div>
<div class="right-view">
<div class="right-view-item">
<div class="text"><span>共享了3个相册</span></div>
<div class="icons">
<span class="edit"><i></i></span>
<span class="delete"><i></i></span>
</div>
</div>
</div>
</li>
{{/each}}
</script>
</body>
<script type="text/javascript" src="../../libs/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="../../libs/sea.js"></script>
<script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script>
var base = location.href.split("/app/")[0];
seajs.config({
paths: {
"manager": base + "/modules/manager",
"libs": base + "/libs",
"common": base + "/modules/common"
},
alias: {
"template": "libs/template.js",
"common": "common/common.js"
}
})
// 加载入口模块
seajs.use("manager/friends.js");
</script>
</html>
1.2 css 文件:
/*-----------------------局部滑动*/
.ui-loader{
display:none
}
ul{
overflow: hidden;
}
.item{
height: 0.60rem;
border-bottom: solid 0.01rem #f0f0f0;
}
.item .left-view{
width: 60%;
height: 100%;
float: left;
}
.left-view .avatar{
display: inline-block;
float: left;
width: 0.40rem;
height: 0.40rem;
overflow: hidden;
border-radius: 50%;
margin-right: 0.10rem;
margin-left: 0.10rem;
border: 0.04rem white solid;
box-shadow: 0rem 0.02rem 0.05rem #999;
margin-top: 0.06rem;
}
.avatar img{
width: 100%;
height: 100%;
}
.left-view .nickname{
height: 100%;
line-height: 0.6rem;
display: inline-block;
float: left;
color: #585858;
}
.item .right-view{
width: 40%;
height: 100%;
overflow: hidden;
position: relative;
}
.right-view .right-view-item{
width: 200%;
height: 100%;
overflow: hidden;
-webkit-transition: all 0.3s linear;
}
.right-view-item.selected{
-webkit-transform: translate(-50%,0);
-webkit-transition:all 0.3s linear;
}
.right-view-item .text{
width: 50%;
height: 100%;
float: left;
line-height: 0.6rem;
padding-right: 0.1rem;
color: #b7b7b7;
text-align: right;
width: calc(50% - 0.1rem);
}
.right-view-item .icons{
width: 50%;
height: 100%;
float: left;
}
.icons span{
width: 50%;
height: 100%;
display: inline-block;
float: left;
}
.icons span.edit{
background-color: #a0a0a0;
}
.icons span.delete{
background-color: #9c0100;
}
.icons span i{
display: inline-block;
width: 0.3rem;
height: 0.3rem;
background-size: 100%;
background-repeat: no-repeat;
margin-top: 0.15rem;
margin-left: calc(50% - 0.15rem);
}
.icons span.edit i{
background-image: url(../../images/new_ui/edit-white.png);
}
.icons span.delete i{
background-image: url(../../images/new_ui/delete-white.png);
}
1.3 js 文件:
define(function(require, exports, module) {
var ArtTemplate = require("libs/template.js");
var Common = require('common/common.js');
var AppBridge = require("common/app-bridge.js");
var Page = {
init:function(){
var array = [0,0,0,0,0,0,0,0,0];
var html = ArtTemplate("part-view-template", array);
$(".part-view").html(html);
//局部滑动
$(".right-view-item").on("swipeleft",function(){
$(this).addClass('selected');
}).on("swiperight",function(){
$(this).removeClass('selected');
});
}
};
Page.init();
});