swiper实现列表向左拖动删除等操作效果代码-html代码-BFW代码库

代码语言：html

所属分类：拖放

代码描述：swiper实现列表向左拖动删除等操作效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!doctype html>
<html class="no-js">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="description" content="">
    <meta name="keywords" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>基础服务-待我办理</title>
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/amazeui.min.css">
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/swiper.min.css">
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/swiper.min.js"></script>
<style>
    ul,ol,li{list-style: none;}
body{ font-size: 1.4rem;}

.wx-basics-launch-name{ height: 3.6rem; line-height: 3.6rem; color: #999999; margin: 0rem; padding-left: 1rem;}
.wx-basics-launch-select{text-align: right; height: 3.6rem; line-height: 3.6rem; color: #999999;}

.wx-handle-main{padding-bottom: 1rem;}
.wx-basics-handel-modular{background-color: #f7f7f7; margin: 0 1rem 1rem 1rem; height: 5.4rem; border-right: 1px solid #55b651; border-radius: 5px; overflow: hidden;}
.wx-basics-handel-modular-checkbox{ background-color: #ffffff; padding-top: 1.6rem;padding-left: 0.4rem; width: 2.5rem; height: 5.4rem; line-height: 5.4rem; float: left; text-align: center; display: none;}
.wx-basics-handel-modular .am-checkbox{margin: 0;padding-left: 0;}
.wx-basics-handel-modular-main{ display: block; background-color: #f7f7f7; height: 5.4rem; width: 100%;}

.swiper-container {
    width: 100%;
    height: 100%;
}
.swiper-slide {
    font-size: 18px;
    /* Center slide text vertically */
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    width: 100%;
}
.swiper-slide:nth-child(2n) {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: flex-start;
    justify-content: flex-start;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    width: 40%;
    background-color: #55b651;
}
.wx-basics-handel-modular-a{display: block; width: 100%; height: 100%; padding-top: 0.5rem; background: #f7f7f7;}
.wx-basics-handel-modular-a:hover{
    background-color: #fafafa;
}
.wx-basics-handel-introduce-user img{ width: 50px; height: 50px; border-radius: 50%;}
.wx-basics-handel-introduce-main p{margin: 3px 0; text-align: left;}
.wx-basics-handel-introduce-main p:first-of-type{ color: #000000; font-size: 14px;}
.wx-basics-handel-introduce-main p:first-of-type span{ color: #cccccc; font-size: 12px; display: inline-block; margin-left: 10px;}
.wx-basics-handel-introduce-main p:last-of-type{ color: #7a7a7a; font-size: 12px;}
.wx-basics-handel-introduce-state{ line-height: 50px; color: #5ab651; text-align: right; font-size: 16px;}

.wx-basics-handel-introduce-span a{ display: inline-block; height: 5.4rem; line-height: 5.4rem; width: 50%; padding: 0 1rem; font-size: 14px; text-align: center;}
.wx-basics-handel-introduce-span a:nth-child(1n){
 background-color: #efeff4; color: #e64340;
}
.wx-basics-handel-introduce-span a:nth-child(2n){
    background-color: #55b651; color: #fff;
}

</style>
</head>
<body>

<div class="wx-handle-main">
    <div class="am-g">
        <div class="am-u-sm-6">
            <p class="wx-basics-launch-name">申请人</p>
        </div>
        <div class="am-u-sm-6 wx-basics-launch-select">
            流程名称
        </div>
    </div>
    <div class="wx-basics-handel-modular am-cf">
        <div class="wx-basics-handel-modular-checkbox">
            <label class="am-checkbox am-success">
                <input type="checkbox" value="" data-am-ucheck class="userid">
            </label>
        </div>
        <div class="wx-basics-handel-modular-main">
            <div class="swiper-container">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">
                        <a href="javascript:;" class="wx-basics-handel-modular-a">
                            <div class="am-g wx-basics-handel-introduce">
                                <div class="am-u-sm-3 wx-basics-handel-introduce-user">
                                    <img src="//repo.bfw.wiki/bfwrepo/image/5e0c6fb85d0a5.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_100,/quality,q_90">
                                </div>
                                <div class="am-u-sm-6 wx-basics-handel-introduce-main am-padding-left-0">
                                    <p>李悠纯<span>10分钟前</span></p>
                                    <p class="am-text-truncate">由于感冒了，需要请假休息一天！</p>
                                </div>
                                <div class="am-u-sm-3 wx-basics-handel-introduce-state">
                                    请假
                                </div>
                            </div>
                        </a>
                    </div>
                    <div class="swiper-slide wx-basics-handel-introduce-span">
                        <a href="javascript:;">不通过</a>
                        <a href="javascript:;">通过</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="wx-basics-handel-modular am-cf">
        <div class="wx-basics-handel-modular-checkbox">
            <label class="am-checkbox am-success">
                <input type="checkbox" value="" data-am-ucheck class="userid">
            </label>
        </div>
        <div class="wx-basics-handel-modular-main">
            <div class="swiper-container">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">
                        <a href="javascript:;" class="wx-basics-handel-modular-a">
                            <div class="am-g wx-basics-handel-introduce">
                                <div class="am-u-sm-3 wx-basics-handel-introduce-user">
                                    <img src="//repo.bfw.wiki/bfwrepo/image/5e0c6fb85d0a5.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_100,/quality,q_90">
                                </div>
                                <div class="am-u-sm-6 wx-basics-handel-introduce-main am-padding-left-0">
                                    <p>Join<span>03/26</span></p>
                                    <p class="am-text-truncate">外出旅游，需要调休一天！</p>
                                </div>
                                <div class="am-u-sm-3 wx-basics-handel-introduce-state">
                                    调休
                                </div>
                            </div>
                        </a>
                    </div>
                    <div class="swiper-slide wx-basics-handel-introduce-span">
                        <a href="javascript:;">不通过</a>
                        <a href="javascript:;">通过</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="wx-basics-handel-modular am-cf">
        <div class="wx-basics-handel-modular-checkbox">
            <label class="am-checkbox am-success">
                <input type="checkbox" value="" data-am-ucheck class="userid">
            </label>
        </div>
        <div class="wx-basics-handel-modular-main">
            <div class="swiper-.........完整代码请登录后点击上方下载按钮下载查看