H5页面仿原生列表会话左滑显示删除键--整体滑动

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

勿问情殇

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

阅读量4.4k

点赞数 2

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

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

版权

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="total-view">
			<li class="touch">
				<div class="item">
					<div class="left-view">
						<div class="avatar"><img src="../../statics/images/avatar.png"></div>
						<div class="nickname">小明</div>
						<div class="text">共享了3个相册</div>
					</div>
					<div class="right-view">
						<span class="edit"><i></i></span>
						<span class="delete"><i></i></span>
					</div>
				</div>
			</li>
		</ul>
		
		<!-- 整体滑动模板 -->
		<script type="text/html" id="total-view-template">
			{{each}}
			<li class="touch">
				<div class="item">
					<div class="left-view">
						<div class="avatar"><img src="../../statics/images/avatar.png"></div>
						<div class="nickname">小明</div>
						<div class="text">共享了3个相册</div>
					</div>
					<div class="right-view">
						<span class="edit"><i></i></span>
						<span class="delete"><i></i></span>
					</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 文件

body{
	font-size: 0.12rem;
    background-color: white;
    color: #666;
}
.head-view{
/*	height: 4px;*/
    background-color: white;
    color: black;
    font-size: 0.16rem;
    text-align: left;
    border-bottom: solid 0.01rem #f3f7fb;
}
.head-view #back-btn{
	padding-left: 0.20rem;
	line-height: 0.44rem;
}
.head-view #add{
    padding-right: 0.20rem;
    line-height: 0.44rem;
    float: right;
}
/*----------------------全屏滑动*/
/*比例是5:2=10:4*/
.ui-loader{
    display:none
}
ul{
    overflow: hidden;
}
.touch{
    height: 0.60rem;
    overflow: hidden;
    position: relative;
    border-bottom: solid 0.01rem #f0f0f0;
}
.item{
    width: 140%;
    height: 100%;
    overflow: hidden;
    -webkit-transition: all 0.3s linear;
}
.item.selected{
    -webkit-transform: translate(-28.6%,0);
    -webkit-transition:all 0.3s linear;
}
.item .left-view{
    overflow: hidden;
    width: 71.4%;
    height: 100%;
    font-size: 0.14rem;
    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;
}
.left-view .text{
    height: 100%;
    float: right;
    line-height: 0.6rem;
    padding-right: 0.1rem;
    color: #b7b7b7;
    font-size: 0.12rem;
}
.item .right-view{
    background-color: blue;
    width: 28.6%;
    height: 100%;
    float: left;
}
.right-view span{
    width: 50%;
    height: 100%;    
    float: left;
    display: inline-block;
}
.right-view span.edit{
    background-color: #a0a0a0;
}
.right-view span.delete{
    background-color: #9c0100;
}
.right-view 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);
}
.right-view span.edit i{
    background-image: url(../../images/new_ui/edit-white.png);
}
.right-view 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("total-view-template", array);
			$(".total-view").html(html);

			//全局滑动
			$(".item").on("swipeleft",function(){
		        $(this).addClass('selected');
		        
		    }).on("swiperight",function(){
		        $(this).removeClass('selected');
		    });
		}
	};
	Page.init();
});

勿问情殇

关注

2
点赞
踩
0

收藏

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

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

扫一扫