手機端swiper行程待辦列表觸屏滑動操作代碼



82 325 109



特效描述:手機端 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

加群請備注:從官網了解到

老夫子电子