swiper实现的背景自适应+上拉自动加载(loading效果)的资讯列表页 微信项目中用到的资讯列表页,为了适应手机端特别优化,采用swiper插件,每一页数据相当于一个swiper-slide,下拉到最底部,ajax取下一页数据,底部加入CSS3实现的loading效果。

背景自适应实现方式:

body {
    background-color: #F0F0F0;
    background-image: url("front/images/bg.jpg") ;
    background-attachment: fixed;     
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

测试代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>公司资讯</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">

    <!-- Link Swiper's CSS -->
    <link rel="stylesheet" href="front/swiper/css/swiper.min.css">

    <link rel="stylesheet" href="front/css/bootstrap.css">

    <!-- Demo styles -->
    <style>
    html, body {
        position: relative;
        height: 100%;
    }
    body {
        background: #fff;
        font-family: "Helvetica Neue","Hiragino Sans GB","Microsoft YaHei","\9ED1\4F53",Arial,sans-serif;
        font-size: 14px;
        color:#000;
        margin: 0;
        padding: 0;
        background-color: #F0F0F0;
        background-image: url("front/images/bg.jpg") ;
        background-attachment: fixed;     
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
    }
    a {
        background: transparent;
    }
    a:active,
    a:hover {
        outline: 0;
    }
    a {
      color: #373e4a;
      text-decoration: none;
      white-space: nowrap;
      overflow: hidden;
    }
    a:hover,
    a:focus {
      color: #16191e;
      text-decoration: underline;
    }
    a:focus {
      outline: thin dotted;
      outline: 5px auto -webkit-focus-ring-color;
      outline-offset: -2px;
    }
    ul {
        list-style: none;
        margin: 0;
        padding: 0;
    } 
    li {
        margin-top:10px;
        margin-bottom:10px;
        border-bottom: 1px solid #ddd;
    }
    .swiper-container {
        width: 100%;
        height: 100%;
    }
    .swiper-slide {
        font-size: 14px;
        height: auto;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        padding: 0px 10px;
    }
    .list-group-item {
        margin: 10px auto;
        padding: 15px 5px;
    }


    .spinner {
      margin: 30px auto;
      width: 20px;
      height: 20px;
      position: relative;
    }
     
    .container1 > div, .container2 > div, .container3 > div {
      width: 6px;
      height: 6px;
      background-color: #333;
     
      border-radius: 100%;
      position: absolute;
      -webkit-animation: bouncedelay 1.2s infinite ease-in-out;
      animation: bouncedelay 1.2s infinite ease-in-out;
      -webkit-animation-fill-mode: both;
      animation-fill-mode: both;
    }
     
    .spinner .spinner-container {
      position: absolute;
      width: 100%;
      height: 100%;
    }
     
    .container2 {
      -webkit-transform: rotateZ(45deg);
      transform: rotateZ(45deg);
    }
     
    .container3 {
      -webkit-transform: rotateZ(90deg);
      transform: rotateZ(90deg);
    }
     
    .circle1 { top: 0; left: 0; }
    .circle2 { top: 0; right: 0; }
    .circle3 { right: 0; bottom: 0; }
    .circle4 { left: 0; bottom: 0; }
     
    .container2 .circle1 {
      -webkit-animation-delay: -1.1s;
      animation-delay: -1.1s;
    }
     
    .container3 .circle1 {
      -webkit-animation-delay: -1.0s;
      animation-delay: -1.0s;
    }
     
    .container1 .circle2 {
      -webkit-animation-delay: -0.9s;
      animation-delay: -0.9s;
    }
     
    .container2 .circle2 {
      -webkit-animation-delay: -0.8s;
      animation-delay: -0.8s;
    }
     
    .container3 .circle2 {
      -webkit-animation-delay: -0.7s;
      animation-delay: -0.7s;
    }
     
    .container1 .circle3 {
      -webkit-animation-delay: -0.6s;
      animation-delay: -0.6s;
    }
     
    .container2 .circle3 {
      -webkit-animation-delay: -0.5s;
      animation-delay: -0.5s;
    }
     
    .container3 .circle3 {
      -webkit-animation-delay: -0.4s;
      animation-delay: -0.4s;
    }
     
    .container1 .circle4 {
      -webkit-animation-delay: -0.3s;
      animation-delay: -0.3s;
    }
     
    .container2 .circle4 {
      -webkit-animation-delay: -0.2s;
      animation-delay: -0.2s;
    }
     
    .container3 .circle4 {
      -webkit-animation-delay: -0.1s;
      animation-delay: -0.1s;
    }
     
    @-webkit-keyframes bouncedelay {
      0%, 80%, 100% { -webkit-transform: scale(0.0) }
      40% { -webkit-transform: scale(1.0) }
    }
     
    @keyframes bouncedelay {
      0%, 80%, 100% {
        transform: scale(0.0);
        -webkit-transform: scale(0.0);
      } 40% {
        transform: scale(1.0);
        -webkit-transform: scale(1.0);
      }
    }

    </style>
</head>
<body>
    <!-- Swiper -->
    <div class="swiper-container">
        <div class="swiper-wrapper" id="swiper-wrapper">
        <div class="swiper-slide">
                <a href="#" class="list-group-item">·集团公司部署三季度工作 全力以赴保效益保增长</a>
                <a href="#" class="list-group-item">·中国石化油服沙特、科威特业务逆势发展</a>
                <a href="#" class="list-group-item">·中国石化8部文学作品获中国作协重点扶持</a>
                <a href="#" class="list-group-item">·中国石化贵州石油:细挖每一座油站的增量</a>
                <a href="#" class="list-group-item">·中国石化茂名石化成功开发高流动性抗冲聚丙烯新产品</a>
                <a href="#" class="list-group-item">·集团公司召开经济活动分析会 要求全力以赴保增长</a>
                <a href="#" class="list-group-item">·石化企业推进润滑油国产化替代成效显著</a>
                <a href="#" class="list-group-item">·中国石化上海石油签订千吨尾气处理液合同</a>
                <a href="#" class="list-group-item">·中国石化化销华东推出中石化-西布尔环保型橡胶新品</a>
                <a href="#" class="list-group-item">·总部安全环保巡视组为石炼“把脉”</a>
                </div>
        </div>
    
        <!-- Add Scroll Bar -->
        <div class="swiper-scrollbar"></div>
    </div>

    <!-- Swiper JS -->
    <script src="front/swiper/js/swiper.min.js"></script>
    <script src="front/js/jquery-1.11.1.min.js"></script>

    <!-- Initialize Swiper -->
    <script>
    var page = 1;
    var loadingShow = false;
    var loadingStr = '<div class="spinner"><div class="spinner-container container1"><div class="circle1"></div><div class="circle2"></div><div class="circle3"></div><div class="circle4"></div></div><div class="spinner-container container2"><div class="circle1"></div><div class="circle2"></div><div class="circle3"></div><div class="circle4"></div></div><div class="spinner-container container3"><div class="circle1"></div><div class="circle2"></div><div class="circle3"></div><div class="circle4"></div></div></div>';
    var swiper = new Swiper('.swiper-container', {
        scrollbar: '.swiper-scrollbar',
        direction: 'vertical',
        slidesPerView: 'auto',
        mousewheelControl: true,
        freeMode: true,
        onTouchEnd: function(swiper){
            if(swiper.isEnd){
                
                //完成一次loading才能开始下一次loading,防止重复多次
                if(!loadingShow) {
        
                    //加载loading提示
                    swiper.appendSlide('<div class="swiper-slide">'+loadingStr+'</div>');
                    swiper.slideNext();
                    loadingShow = true;

                    getAjaxNews();
                }
                
            }
        
        }
    });
    
    function getAjaxNews() {
        setTimeout(function(){
            
            //删除loading提示
            swiper.removeSlide(page);
            loadingShow = false;
                
            page++;

            /*
            $.ajax({
                type:'POST',
                data:{ page:page },
                dataType: "json",
                url: "getAjaxNews",
                success: function(json)
                {
                    
                                
                }
            });
            */
            //假设通过AJAX取来的数据如下
            var list = [{"id":8,"news_title":"\u71c3\u6cb9\u5b9d\u662f\u4ec0\u4e48\uff1f","news_author":"\u6c5f\u897f\u77f3\u6cb9","make_time":1433925343},{"id":7,"news_title":"\u4e2d\u56fd\u77f3\u5316\u7684\u4e3b\u8425\u4e1a\u52a1\u8303\u56f4\u5305\u62ec\u54ea\u4e9b\uff1f","news_author":"\u6c5f\u897f\u77f3\u6cb9","make_time":1433925284},{"id":6,"news_title":"\u4e2d\u56fd\u77f3\u6cb9\u5316\u5de5\u96c6\u56e2\u516c\u53f8\u662f\u4f55\u65f6\u6210\u7acb\u7684?","news_author":"\u6c5f\u897f\u77f3\u6cb9","make_time":1433925258},{"id":5,"news_title":"\u52a0\u6cb9\u65f6\u7684\u6ce8\u610f\u4e8b\u9879","news_author":"\u6c5f\u897f\u77f3\u6cb9","make_time":1433925002},{"id":8,"news_title":"\u71c3\u6cb9\u5b9d\u662f\u4ec0\u4e48\uff1f","news_author":"\u6c5f\u897f\u77f3\u6cb9","make_time":1433925343},{"id":7,"news_title":"\u4e2d\u56fd\u77f3\u5316\u7684\u4e3b\u8425\u4e1a\u52a1\u8303\u56f4\u5305\u62ec\u54ea\u4e9b\uff1f","news_author":"\u6c5f\u897f\u77f3\u6cb9","make_time":1433925284},{"id":6,"news_title":"\u4e2d\u56fd\u77f3\u6cb9\u5316\u5de5\u96c6\u56e2\u516c\u53f8\u662f\u4f55\u65f6\u6210\u7acb\u7684?","news_author":"\u6c5f\u897f\u77f3\u6cb9","make_time":1433925258},{"id":5,"news_title":"\u52a0\u6cb9\u65f6\u7684\u6ce8\u610f\u4e8b\u9879","news_author":"\u6c5f\u897f\u77f3\u6cb9","make_time":1433925002}];
            
            //var list = json.data;
            if(list != false) {
                var appendStr = "";
                for(var i=0;i<list.length;i++){
                    appendStr = appendStr+'<a href="#" class="list-group-item">'+list[i].news_title+'</a>';
                }
                swiper.appendSlide('<div class="swiper-slide">'+appendStr+'</div>');
                
                swiper.slideNext();
            }
            
        },1000);

    }
    </script>
</body>
</html>

资源打包下载:http://download.csdn.net/detail/keyunq/8908423
DEMO:http://www.keyunq.com/swiper/