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.4.5.1.css">
    <style>
        /* CSS Document */
    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/5e0c6f2cae508.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/60d41f5173b0d.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">
.........完整代码请登录后点击上方下载按钮下载查看