H5页面仿原生列表会话左滑显示删除键/编辑键--局部滑动

最新推荐文章于 2024-04-19 09:06:27 发布

勿问情殇

最新推荐文章于 2024-04-19 09:06:27 发布

阅读量3k

点赞数

分类专栏： h5 前端技术文章标签： h5 局部滑动删除

本文链接：https://blog.csdn.net/chen158_7/article/details/71083283

版权

h5 同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

前端技术

5 篇文章 0 订阅

订阅专栏

H5页面仿原生列表会话左滑显示删除键/编辑键--局部滑动

页面滑动原理主要是用了一个左滑手势，需要在页面中引入jquery.mobile-1.4.5.min.js这个插件。

页面文件之间的管理用的是 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();
});

勿问情殇

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
H5页面仿原生列表会话左滑显示删除键/编辑键--局部滑动

H5页面仿原生列表会话左滑显示删除键/编辑键--局部滑动页面滑动原理主要是用了一个左滑手势，需要在页面中引入jquery.mobile-1.4.5.min.js这个插件。页面文件之间的管理用的是 sea.js 框架.效果图如下：1.1 HTML 文件: 通讯录 var font
复制链接

扫一扫