有什么技术性的问题 欢迎大家留言 !

< ! ---------- HTML ------------ >

// 在控制台运行移动端模拟器的时候需要添加视口配置
// 在之后的Bootstrap里面会细说视口
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0">
<div class="touch">
    <ul class="header">
        <li class="current">新闻</li>
        <li>科技</li>
    </ul>
    <span class="line"></span>
    <div class="content">
        <div class="list">
            <ul>
                <li>新闻列表新闻列表</li>
                <li>新闻列表新闻列表</li>
                <li>新闻列表新闻列表</li>
                <li>新闻列表新闻列表</li>
                <li>新闻列表新闻列表</li>
            </ul>
            <a href="javascript:;" class="more">查看更多...</a>
        </div>
        <div class="list">
            <ul>
                <li>科技列表科技列表</li>
                <li>科技列表科技列表</li>
                <li>科技列表科技列表</li>
                <li>科技列表科技列表</li>
                <li>科技列表科技列表</li>
            </ul>
            <a href="javascript:;" class="more">查看更多...</a>
        </div>
    </div>
</div>

< ! --------- Style -------------- >

<style>
    * {
        margin: 0;
        padding: 0;
        border: 0;
        list-style-type: none;
    }

    .touch {
        width: 100%;
        position: relative;
        overflow: hidden;
    }

    .header {
        width: 100%;
        height: 40px;
        text-align: center;
        background: #cccccc;
    }

    .header li {
        float: left;
        width: 50%;
        height: 40px;
        line-height: 40px;
        font-weight: bolder;
        font-size:18px;
    }

    .header .current {
        color: darkred;
    }

    .line {
        width: 50%;
        color: darkred;
        border-bottom: 3px solid darkred;
        position: absolute;
        top: 37px;
        left: 0;
    }

    .content {
        width: 200%;
        overflow: hidden;
    }

    .content > div {
        float: left;
        width: 50%;
    }

    .content ul {
        padding-left: 10px;
    }

    .list li {
        text-indent: 1em;
        line-height: 40px;
        border-bottom: 1px solid #000;
    }

    .list .more {
        text-decoration: none;
        color: #000;
        display: block;
        text-align: center;
        height: 50px;
        line-height:50px;
    }
</style>

< ! --------- JavaScript ------- >

<script src="js/zepto.min.js"></script>
<script src="js/touch.js"></script>
<script>
    $(function () {
        // 兼容 不加这行代码 你会发现有些浏览器会有bug
        $('.content').on('touchmove', function (event) {
            event.preventDefault();
        }, true);

        // 1. 点击切换
        $('.header li').tap(function () {
            // 1.1 获取点击的索引
            var index = $(this).index();
            change(index);
        });

        // 2. 滑动切换 --- 左边
        $('.content').swipeLeft(function () {

            // 2.1 获取索引
            var index = $(this).children('div').index();
            index++;
            change(index);
        });

        // 3. 滑动切换 --- 右边
        $('.content').swipeRight(function () {
            // 2.1 获取索引
            var index = $(this).children('div').index();
            index--;
            if (index < 0) {
                index = 0;
            }
            change(index);
        });

        /**
         * 滑动函数
         * @param index  滑动当前的索引
         */
        function change(index) {
            $('.header li').eq(index).addClass('current').siblings().removeClass('current');
            $('.line').css({
                'transform': 'translate(' + index * 100 + '%)',
                'transition': 'all 0.25s linear'
            });
            $('.content').css({
                'transform': 'translate(' + index * -50 + '%)',
                'transition': 'all 0.25s linear'
            });
        }
    });
</script>

< ! --------- 效果展示 ---------- >

**zepto 滑动**