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