sui 无限下拉分页

最新推荐文章于 2024-04-21 09:58:22 发布

转载最新推荐文章于 2024-04-21 09:58:22 发布 · 240 阅读

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/vali/p/6535296.html

<!DOCTYPE html>-  
<html>  
<head>  
    <meta charset="utf-8">  
    <meta http-equiv="X-UA-Compatible" content="IE=edge">  
    <title>兔兔团</title>  
    <meta name="viewport" content="initial-scale=1, maximum-scale=1">  
    <link rel="shortcut icon" href="/favicon.ico">  
    <meta name="apple-mobile-web-app-capable" content="yes">  
    <meta name="apple-mobile-web-app-status-bar-style" content="black">  
    <link rel="stylesheet" href="//g.alicdn.com/msui/sm/0.6.2/css/sm.min.css">  
    <link rel="stylesheet" href="//g.alicdn.com/msui/sm/0.6.2/css/sm-extend.min.css">  
    <link rel="stylesheet" href="../../css-sui/base.css">  
    <link rel="stylesheet" href="../../css-sui/shop/product-list.css">  
</head>  
<body>  
<div class="page-group">  
    <div class="page page-current">  
        <header class="bar bar-nav headerBar">  
            <a class="button button-link button-nav pull-left" href="fullCutHall.html" data-transition='slide-out' external>  
                <span class="icon icon-iconfontback"></span>  
            </a>  
            <h1 class="title" id="hallTitle"></h1>  
            <script id="hallTitleTemp" type="text/html">  
                {{tuanTitle}}  
            </script>  
            <a class="icon pull-right icon-iconfontgengduodiandian"></a>  
            <div class="head-sec-memu" id="secondMenu"></div>  
        </header>  
        <div class="content">  
        <span class="page-list" data-pagenum="" data-totalpage="" data-pagesize=""></span>  <!--获取页面参数-->  
            <div class="infinite-scroll infinite-scroll-bottom" data-distance="100">  
                <div class="row newProList" id="pro-list"></div>  
                <!-- 加载提示符 -->  
                <div class="infinite-scroll-preloader">  
                    <div class="preloader"></div>  
                </div>  
                <script id="brandListTemp-include" type="text/html">  
                    {{each list}}  
                        <div class="col-50">  
                            <div class="card card-newPro">  
                                <div class="brand-img-box"  onclick="window.location='http://m.gohomeplay.com/getProductDetail.do?pmInfoId={{$value.pmInfoId}}'"><img src="{{$value.pic}}" alt="" /></div>  
                                <p class="brand-tit"  onclick="window.location='{{$value.url}}'">{{$value.name}}</p>  
                                <p><span class="curPrice"><b>¥</b>{{$value.fightGroupPrice}}</span><span class="oldPrice"><b>¥</b>{{$value.oldPrice}}</span></p>  
                                <p class="group-num"><span>{{$value.personNum}}人团</span><span onclick="window.location='http://m.gohomeplay.com/getProductDetail.do?pmInfoId={{$value.pmInfoId}}&cityId=187'">马上团</span></p>  
                            </div>  
                        </div>  
                    {{/each}}  
                </script>  
            </div>  
        </div>  
    </div>  
</div>  
<script src="../../js/base/require.js" data-main="../../js-sui/shop/groupList.js"></script>  
  
</body>  
</html>

require.config({
    paths: {
        "base": "../../js/base/base",
        "secMenu": "../../js/base/secMenu",
        "template": "../../js/base/template"
    }
});
define(['base','template','secMenu'], function (base,template,secMenu){
    $(function() {
        var loading=false;
        getData = function (currPage, pageSize) {
            $.ajax({
                type: 'GET',
                url: 'http://192.168.100.101/service/productCategoryAdapter/getFightGroupList',  //接口地址
                timeout: 300,
                //context: $('tbody'),
                data: {curPage: currPage, pageSize: pageSize},  //异步返回给data
                success: function (data) {
                    //console.log(data);
                    var groupListData = data.data
                    var html = template('brandListTemp-include', groupListData);
                    // 添加新条目
                    $('#pro-list').append(html);
                    $(".card-newPro img").css("height", $(".card-newPro img").width());
                    $(".page-list").data('pagenum', parseInt(data.data.currentPage));
                    $(".page-list").data('totalpage', parseInt(data.data.totalPage));
                }
            });
        };

        getData(1, 6);

        $(document).on('infinite', function () {
            // 如果正在加载，则退出
            if (loading) return;
            // 设置flag
            loading = true;
            // 模拟1s的加载过程
            setTimeout(function() {
                // 重置加载flag
                loading = false;
                var currpage = $(".page-list").data('pagenum');
                var totalpage = $(".page-list").data('totalpage');
                if (currpage >= totalpage) {
                    // 加载完毕，则注销无限加载事件，以防不必要的加载
                    $.detachInfiniteScroll($('.infinite-scroll'));
                    // 删除加载提示符
                    $('.infinite-scroll-preloader').remove();
                    return;
                }

                getData(parseInt(currpage + 1), 6);
                //容器发生改变,如果是js滚动，需要刷新滚动
                $.refreshScroller();
            },1000);

        });
        $.init();
    });

    var hallTitleData = {
        tuanTitle: '兔兔团'
    }
    var hallTitle = template('hallTitleTemp', hallTitleData);
    document.getElementById('hallTitle').innerHTML = hallTitle;