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

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

代码语言：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.........完整代码请登录后点击上方下载按钮下载查看