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