手机端swiper行程待办列表触屏滑动操作代码



78 311 104



特效描述:手机端 swiper 行程待办列表 触屏滑动,仿QQ消息列表页面手机触屏滑动列表项进行删除,编辑操作。

代码结构

1. 引入CSS

<link rel="stylesheet" href="css/amazeui.min.css">
<link rel="stylesheet" href="css/swiper-3.3.1.min.css">
<link rel="stylesheet" href="css/wx.css">

2. 引入JS

<script type="text/javascript" src="js/swiper-3.3.1.min.js"></script>

3. HTML代码

<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="images/user-img.png">
                                </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="images/launch-user-img05.png">
                                </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-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="images/launch-user-img02.png">
                                </div>
                                <div class="am-u-sm-6 wx-basics-handel-introduce-main am-padding-left-0">
                                    <p>钱宝宝<span>03/25</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="images/launch-user-img06.png">
                                </div>
                                <div class="am-u-sm-6 wx-basics-handel-introduce-main am-padding-left-0">
                                    <p>李依依<span>03/24</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="images/launch-user-img03.png">
                                </div>
                                <div class="am-u-sm-6 wx-basics-handel-introduce-main am-padding-left-0">
                                    <p>肖军<span>03/23</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="images/launch-user-img07.png">
                                </div>
                                <div class="am-u-sm-6 wx-basics-handel-introduce-main am-padding-left-0">
                                    <p>陈静蕾<span>03/22</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>
<script type="text/javascript">
var swiper = new Swiper('.swiper-container', {
	slidesPerView: 'auto',
	spaceBetween: 0,
	freeMode: true,
	freeModeSticky : true,
	resistance:true,
});
</script>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 滑动 滑块 滑动门 触屏滑动 滑动插件 滑块插件 滑动选项卡 滑动切换

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到