sui 无限下拉分页
1.
<!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>
2.
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;
3. 代码系copy
