4.3Zepto之swipe事件

swipe事件

手指快速的往左边滑动/或者右边滑动/或者上边滑动/或者下边滑动
swipeLeft: 向左边轻扫
swipeRight: 向右边轻扫
swipeUp: 向上边轻扫
swipeDown: 向下边轻扫

html部分
<div class="box">
<div class="box-top">
    <ul>
        <li class="active">新闻</li>
        <li>八卦</li>
    </ul>
    <p class="line"></p>
</div>
<div class="box-bottom">
    <ul class="current">
        <li>我是新闻1</li>
        <li>我是新闻2</li>
        <li>我是新闻3</li>
        <li>我是新闻4</li>
        <li>我是新闻5</li>
    </ul>
    <ul>
        <li>我是八卦1</li>
        <li>我是八卦2</li>
        <li>我是八卦3</li>
        <li>我是八卦4</li>
        <li>我是八卦5</li>
    </ul>
</div>
</div>
--------------------------------------------------------
js部分
事先引入的js
<script src="js/zepto.js"></script>
<script src="js/event.js"></script>
<script src="js/fx.js"></script>
<script src="js/touch.js"></script>
<script src="js/selector.js"></script>
<script>
    $(".box-top>ul>li").on("qhy:click",function () {
        $(this).addClass("active").siblings().removeClass("active");
       let currentIndex = $(this).index();
        $(".line").animate({left:currentIndex*$(this).width()+"px"},500);
        $(".box-bottom").animate({left:-currentIndex*$(".current").width()+"px"},500);
    });
    $(".box-top>ul>li").click(function () {
        $(this).trigger("qhy:click");
    });
    $(".box").swipeLeft(function () {
        $(".box-top>ul>li:last").trigger("qhy:click");
    });
    $(".box").swipeRight(function () {
        $(".box-top>ul>li:first").trigger("qhy:click");
    });
</script>

效果图
可通过点击顶部“新闻”和“滑动”板块和滑动屏幕来切换界面
且有动画过渡。