html5手机端滑动删除添加列表

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 html5手机端滑动删除添加列表的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <title>html5手机端滑动删除添加列表</title>
    <link rel="stylesheet" href="css/framework7.ios.min.css">
    <link rel="stylesheet" href="css/framework7.ios.colors.min.css">
    <link rel="stylesheet" href="css/framework7.material.min.css">
    <link rel="stylesheet" href="css/framework7.material.colors.min.css">
    <link rel="stylesheet" href="css/upscroller.css">
    <link rel="stylesheet" href="css/my-app.css">
</head>
<body class="">

<!-- Views -->
<div class="views">
    <div class="view view-main">
        Top Navbar
        <div class="navbar">
            <div class="navbar-inner">
                <div class="right">
                    <a href="#" class="link icon-only open-panel"><i class="icon icon-bars-blue"></i></a>
                </div>
            </div>
        </div>
        <a href="javascript:" class="floating-button addbtn color-pink"><i class="icon icon-plus"></i></a>
        <div class="pages navbar-through toolbar-through">
            <div data-page="index" class="page">

                <!--内容开始-->

                <div class="page-content">

                    <div class="list-block">
                          <ul>

                          </ul>


                        <div class="row">
                            <div class="col-100 ">
                                <button class="button button-fill color-red" style="width: 100%">保存</button>
                            </div>
                        </div>

                    </div>

                </div>
                <!--内容结束-->

            </div>
        </div>



    </div>
</div>

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/framework7.min.js"></script>
<!-- Path to your app js-->
<script type="text/javascript" src="js/upscroller.js"></script>
<script type="text/javascript" src="js/my-app.js"></script>
<script>
    $(".addbtn").click(function(){

        $("ul").append(
                '<li class="swipeout" >'+
                '<div class="item-content">'+
                '<div class="item-inner">'+
                '<div class="item-title label">' +
                '<textarea name="" id="" placeholder="请输入内容" >'+
                '</textarea>'+
                '</div>'+
                '<div class="item-input">'+
                '<img class="imgsc img1"  src="img/i-f7-ios.png" width="87" height="87" alt=""/>'+
                '<img src="img/add.png" class="imgsc img2"  width="87" height="87" alt=""/>'+
                '</div>'+
                '</div>'+
                '<div class="swipeout-actions-right">'+
                '<a href="#" class="swipeout-delete">Delete</a>'+
                '</div>'+
                '</div>'+
                '</li>'

        );

        $('.item-input').each(function(i){
            console.log($(this).find('img:first').attr('id','zoom'+i));
            console.log($(this).find('img:first').next().attr('id','add'+i));
        })

    });

</script>

</body>
</html>

JS代码(my-app.js):

// 初始化应用程序和存储，为进一步获得其方法MyApp变量//var myApp = new Framework7();
	//可以自定义配置参数var myApp = new Framework7({
	//materialPageLoadDelay:0,//延迟（在毫秒）之前的动画加载页。可以增加一点来提高性能 //materialRipple:'true' //启用/禁用特有的触摸纹波效应}
);
	// 我们需要使用自定义DOM类库，让我们将它保存到$$变量：var $$ = Framework7.$;
	// 添加视图var mainView = myApp.addView('.view-main',{
	// 因为我们要用动态的导航栏，我们需要使它的这一观点： dynamicNavbar:true}
);
	// 现在我们需要运行仅用于页面的代码。// 在这种情况下，我们需要添加事件侦听器的“pageinit”事件// 选择1。用一pageinit”事件处理程序的所有页面（推荐的方法）：$$(document).on('pageInit',function (e){
	// 从事件数据获取页数据 var page = e.detail.page;
	//if (page.name === 'form'){
	// // 下面的代码将被执行的页面与数据页的属性等于“about” // myApp.alert('跳转成功');
	//}
}
)//选择2。用活的pageinit”事件处理程序的每一页$$(document).on('pageInit','.page[data-page="form"]',function (e){
	// 下面的代码将被执行的页面与数据页的属性等于“about” myApp.alert('Here comes About page');
}
)$$('.action1').on('click',function (){
	myApp.alert('Action 1');
}
);
	$$('.action2').on('click',function (){
	myApp.alert('Action 2');
}
);
	//下拉刷新// 随意编造的内容var songs = ['Yellow Submarine','Don\'t Stop Me Now','Billie Jean','Californication'];
	var authors = ['Beatles','Queen','Michael Jackson','Red Hot Chili Peppers'];
	// 下拉刷新页面var ptrContent = $$('.pull-to-refresh-content');
	// 添加'refresh'监听器ptrContent.on('refresh',function (e){
	// 模拟2s的加载过程 setTimeout(function (){
	// 随机图片 //var picURL = 'img/i-f7-ios.png' + Math.round(Math.random() * 100);
	var picURL = 'img/i-f7-material.png';
	// 随机音乐 var song = songs[Math.floor(Math.random() * songs.length)];
	// 随机作者 var author = authors[Math.floor(Math.random() * authors.length)];
	// 列表元素的HTML字符串 var itemHTML = '<li class="item-content">' + '<div class="item-media"><img src="' + picURL + '" width="44"/></div>' + '<div class="item-inner">' + '<div class="item-title-row">' + '<div class="item-title">' + song + '</div>' + '</div>' + '<div class="item-subtitle">' + author + '</div>' + '</div>' + '</li>';
	// 前插新列表元素 ptrContent.find('ul').prepend(itemHTML);
	// 加载完毕需要重置 myApp.pullToRefreshDone();
}
,2000);
}
);
	//获取表单的数据$$('.form-from-json').on('click',function(){
	var formData = myApp.formToJSON('#my-form');
	alert(JSON.stringify(formData));
}
);
	//填充表单数据$$('.form-from-json1').on('click',function(){
	var formData ={
	'name':'John','email':'john@doe.com','gender':'female','switch':['yes'],'slider':10}
myApp.formFromJSON('#my-form1',formData);
}
);
	//图片浏览器var myPhotoBrowserStandalone = myApp.photoBrowser({
	swipeToClose:true,theme:'dark',backLinkText:'关闭',lazyLoading:true,lazyLoadingOnTransitionStart:true,photos:[{
	url:'http://lorempixel.com/1024/1024/sports/1/',caption:'标题1'}
,{
	url:'http://lorempixel.com/1024/1024/sports/2/',caption:'标题2'}
,{
	html:'<div style="width:500px;
	height:200px;
	background:#ccc;
	">1111111111111111</div>',caption:'标题3'}
]}
);
	//点击时打开图片浏览器$$('.pb-standalone').on('click',function (){
	myPhotoBrowserStandalone.open();
}
);
	//返回顶部myApp.upscroller('Go up');
	//时间

CSS代码(my-app.css):