Infinitescroll 无限加载
简介
无限滚动显示是当前适应移动端操作习惯而流行的列表显示方式。直观的一种表现便是当进入可视区域后才显示列表的更多的内容，与常规点击分页显示内容又很大的不同。
在页面比较庞大或者网速较慢的时候，使用异步无限滚动方式加载列表表现优异，无限滚动是目前开发管理系统必备插件。
无限滚动加载实现了两个能力，一是按需加载列表；二是动画展示后加载的内容。
本框架内置的无限滚动插件已经能满足大多数场景需求，所有本框架剔除了第三方无限滚动插件：infinite-scroll。infinite-scroll也是非常好用的无限加载插件，详细使用方法查看插件官网，或者Github。
特点
- 1、支持当页模拟缓加载效果
- 2、支持正文内容无限加载
- 3、支持异步json文件无限加载
- 4、支持异步sql数据无限加载
- 5、支持三种进入效果
- 6、除了滚动加载，还支持点击和逐页加载
使用方法
插件运行方式有两种：
- ax*属性：对列表父标签使用
axInfinite属性即可按默认参数运行插件。 - js实例：通过
new axInfinite('#ID')方式创建实例运行。
模拟使用说明
如果所要显示的节点已经在页面全部加载完成，只是需要实现模拟懒加载的效果，此时只给需要给列表父元素添加axInfinite属性，同时使用type=list类型。
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
<ul axInfinite='type:"list"'>
<li class="demo-section-border" style="background-color: #cae2b3">1</li>
<li class="demo-section-border" style="background-color: #ffc600">2</li>
<li class="demo-section-border" style="background-color: #ff9c00">3</li>
<li class="demo-section-border" style="background-color: #7df7ca">4</li>
<li class="demo-section-border" style="background-color: #bcf77d">5</li>
<li class="demo-section-border" style="background-color: #7dd6f7">6</li>
<li class="demo-section-border" style="background-color: #ea7df7">7</li>
<li class="demo-section-border" style="background-color: #f77db4">8</li>
<li class="demo-section-border" style="background-color: #f7b97d">9</li>
<li class="demo-section-border" style="background-color: #f7887d">10</li>
<li class="demo-section-border" style="background-color: #7d8ef7">11</li>
<li class="demo-section-border" style="background-color: #b47df7">12</li>
<li class="demo-section-border" style="background-color: #f7ed7d">13</li>
<li class="demo-section-border" style="background-color: #7df7b9">14</li>
<li class="demo-section-border" style="background-color: #f77db1">15</li>
</ul>
缩放动画进入
参数animation设置进入动画效果，默认是ax-fadeIn。通过设置animation=ax-scaleIn，实现：当元素进入屏幕会从0放大正常大小。
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
<ul axInfinite='type:"list",animation:"ax-scaleIn"'>
<li class="ax-scale demo-section-border" style="background-color: #cae2b3">1</li>
<li class="demo-section-border" style="background-color: #ffc600">2</li>
<li class="demo-section-border" style="background-color: #ff9c00">3</li>
<li class="demo-section-border" style="background-color: #7df7ca">4</li>
<li class="demo-section-border" style="background-color: #bcf77d">5</li>
<li class="demo-section-border" style="background-color: #7dd6f7">6</li>
<li class="demo-section-border" style="background-color: #ea7df7">7</li>
<li class="demo-section-border" style="background-color: #f77db4">8</li>
<li class="demo-section-border" style="background-color: #f7b97d">9</li>
<li class="demo-section-border" style="background-color: #f7887d">10</li>
<li class="demo-section-border" style="background-color: #7d8ef7">11</li>
<li class="demo-section-border" style="background-color: #b47df7">12</li>
<li class="demo-section-border" style="background-color: #f7ed7d">13</li>
<li class="demo-section-border" style="background-color: #7df7b9">14</li>
<li class="demo-section-border" style="background-color: #f77db1">15</li>
</ul>
飞入动画进入
通过设置animation=ax-fadeInUp，实现：当元素进入屏幕会从底往上飘入。
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
<ul axInfinite='type:"list",animation:"ax-fadeInUp"'>
<li class="demo-section-border" style="background-color: #cae2b3">1</li>
<li class="demo-section-border" style="background-color: #ffc600">2</li>
<li class="demo-section-border" style="background-color: #ff9c00">3</li>
<li class="demo-section-border" style="background-color: #7df7ca">4</li>
<li class="demo-section-border" style="background-color: #bcf77d">5</li>
<li class="demo-section-border" style="background-color: #7dd6f7">6</li>
<li class="demo-section-border" style="background-color: #ea7df7">7</li>
<li class="demo-section-border" style="background-color: #f77db4">8</li>
<li class="demo-section-border" style="background-color: #f7b97d">9</li>
<li class="demo-section-border" style="background-color: #f7887d">10</li>
<li class="demo-section-border" style="background-color: #7d8ef7">11</li>
<li class="demo-section-border" style="background-color: #b47df7">12</li>
<li class="demo-section-border" style="background-color: #f7ed7d">13</li>
<li class="demo-section-border" style="background-color: #7df7b9">14</li>
<li class="demo-section-border" style="background-color: #f77db1">15</li>
</ul>
添加静态列表
有时候需要追加列表内容到现有的页面节点，以模拟无限滚动效果，可以通过data参数设置json数据源追加新的列表项。
-
45次
-
234次
-
98次
-
217次
-
348次
-
219次
-
<ul id="addList"> <li class="ax-info-block"> <div class="ax-row"> <div class="ax-col"><a href="##" class="ax-ell">南航与英航签署联营合作协议代码共享</a></div> <span class="ax-arrow"><i>26</i>次</span> </div> </li> <li class="ax-info-block"> <div class="ax-row"> <div class="ax-col"><a href="##" class="ax-ell">到英国大城小镇看“亮灯”</a></div> <span class="ax-arrow"><i>45</i>次</span> </div> </li> <li class="ax-info-block"> <div class="ax-row"> <div class="ax-col"><a href="##" class="ax-ell">英国人喝茶不再流行贵族范</a></div> <span class="ax-arrow"><i>234</i>次</span> </div> </li> <li class="ax-info-block"> <div class="ax-row"> <div class="ax-col"><a href="##" class="ax-ell">西班牙斗牛与逗牛，精彩各不同</a></div> <span class="ax-arrow"><i>98</i>次</span> </div> </li> <li class="ax-info-block"> <div class="ax-row"> <div class="ax-col"><a href="##" class="ax-ell">出了转广州拍照，朋友以为我去了澳洲旅游！</a></div> <span class="ax-arrow"><i>59</i>次</span> </div> </li> <li class="ax-info-block"> <div class="ax-row"> <div class="ax-col"><a href="##" class="ax-ell">古巴自由行,在古巴旅游是一种怎样的体验?</a></div> <span class="ax-arrow"><i>217</i>次</span> </div> </li> <li class="ax-info-block"> <div class="ax-row"> <div class="ax-col"><a href="##" class="ax-ell">道北，洛阳人熟悉又陌生的地方，如今新面貌</a></div> <span class="ax-arrow"><i>348</i>次</span> </div> </li> <li class="ax-info-block"> <div class="ax-row"> <div class="ax-col"><a href="##" class="ax-ell">一边泡温泉一边看海景，来日本，体验独有的温泉文化 </a></div> <span class="ax-arrow"><i>148</i>次</span> </div> </li> <li class="ax-info-block"> <div class="ax-row"> <div class="ax-col"><a href="##" class="ax-ell">国际航线受阻，韩航空公司抢占国内航线 </a></div> <span class="ax-arrow"><i>219</i>次</span> </div> </li> <li class="ax-info-block"> <div class="ax-row"> <div class="ax-col"><a href="##" class="ax-ell">巴厘岛“原始海滩”，海浪滔天，风景壮美，是绝佳的“冲浪秘境” </a></div> <span class="ax-arrow"><i>91</i>次</span> </div> </li> <li class="ax-info-block"> <div class="ax-row"> <div class="ax-col"><a href="##" class="ax-ell">印尼最活跃的活火山，导致一个王国毁灭，是最受欢迎旅游目的地 </a></div> <span class="ax-arrow"><i>118</i>次</span> </div> </li> <li class="ax-info-block"> <div class="ax-row"> <div class="ax-col"><a href="##" class="ax-ell">印尼最活跃的活火山，带上这篇旅游攻略，你才能知道马尔代夫有多美~ </a></div> <span class="ax-arrow"><i>315</i>次</span> </div> </li> <li class="ax-info-block"> <div class="ax-row"> <div class="ax-col"><a href="##" class="ax-ell">泰国的清新小镇，被誉为泰国的小瑞士，风景优美闻名于世</a></div> <span class="ax-arrow"><i>124</i>次</span> </div> </li> </ul> -
let data = [ { title: '南京：25日起将出现持续高温天气 最高可达41℃', href: '###', click: 63 }, { title: '美国总统拜登确诊感染新冠病毒 中方回应', href: '###', click: 81 }, { title: '中国证监会上海监管局原调研员朱毅被开除党籍', href: '###', click: 204 }, { title: '陕西本轮本土疫情全部清零', href: '###', click: 365 }, { title: '四川省泸州市政府原党组成员、副市长郭庆被“双开”', href: '###', click: 109 }, { title: '刘振芳任国铁集团董事长 郭竹学任总经理', href: '###', click: 981 }, { title: '天津西青区新增划定多个高、中、低风险区', href: '###', click: 207 }, { title: '中国移动原市场经营部资深经理陆文昌被查', href: '###', click: 260 }, { title: '刘炤任最高检党组成员，原任司法部副部长', href: '###', click: 259 }, { title: '林志颖驾驶特斯拉发生严重车祸，现已送医', href: '###', click: 391 }, { title: '郑州市防汛应急救援电话', href: '###', click: 184 }, { title: '频频“出圈”的网红官员', href: '###', click: 368 }, { title: '今天傍晚雷阵雨抵京，双休日继续闷热', href: '###', click: 261 }, { title: '一天新增超500例阳性！46家景区暂停接待', href: '###', click: 715 }, { title: '甘肃兰州城关区社会面检出阳性人员数量明显下降', href: '###', click: 684 }, { title: '山东省政协原主席陆懋曾因病逝世，享年94岁', href: '###', click: 246 }, { title: '甘肃兰州第二轮全域全员核酸检测检出阳性179例', href: '###', click: 154 }, { title: '甘肃兰州已启用集中隔离点172个 集中隔离10351人', href: '###', click: 815 }, { title: '澳门新增核酸检测阳性病例5例 社区实现清零', href: '###', click: 487 }, { title: '一查到底！南京回应寺庙供奉日本侵华战犯牌位', href: '###', click: 685 }, { title: '今日9时河南启动防汛四级应急响应', href: '###', click: 163 }, { title: '击败卫冕冠军，清华女篮夺得CUBA队史第3冠', href: '###', click: 241 }, { title: '滞留涠洲岛八天八夜，他们“希望那个岛越来越好”', href: '###', click: 259 }, { title: '吉林省7月21日新增本地无症状感染者2例，均在榆树市', href: '###', click: 581 }, { title: '安徽7月21日新增本土确诊8例、本土无症状44例', href: '###', click: 48 }, { title: '痛心！长江白鲟被正式宣布灭绝 存活了约2亿年', href: '###', click: 69 }, { title: '北京7月21日无新增本土确诊病例和本土无症状感染者', href: '###', click: 841 }, { title: '如何稳增长？基建再次“挑大梁”', href: '###', click: 154 }, { title: '深圳多地调整疫情风险区等级', href: '###', click: 325 }, { title: '教育部开展专项行动，严查这些突出问题！', href: '###', click: 962 }, { title: '云南7月21日无新增确诊病例', href: '###', click: 459 }, { title: '广东中山三角镇中高风险区清零', href: '###', click: 98 }, { title: '陪伴香港人23年的大熊猫“安安”离世，终年35岁', href: '###', click: 1105 }, { title: '这一省会城市土拍要求“现房销售”，啥信号？', href: '###', click: 965 }, { title: '车市上半年：“乘”涨“商”跌 商用车何时重归增长?', href: '###', click: 125 }, { title: '广州地铁三号线东延段开始铺轨', href: '###', click: 854 }, { title: '甘肃临夏积石山县本轮疫情已累计报告7例感染者', href: '###', click: 698 }, ] let tpl = ` <li> <div class="ax-info-block"> <div class="ax-row"> <div class="ax-col"><a href="<# this.href #>" class="ax-ell"><# this.title #></a></div> <span class="ax-arrow"><# this.click #>次</span> </div> </div> </li> ` let listIns = new axInfinite('#addList',{ data:data, template:tpl, });
<ul axInfinite='type:"list",animation:"ax-flyInUp"'>
<li class="demo-section-border" style="background-color: #cae2b3">1</li>
<li class="demo-section-border" style="background-color: #ffc600">2</li>
<li class="demo-section-border" style="background-color: #ff9c00">3</li>
<li class="demo-section-border" style="background-color: #7df7ca">4</li>
<li class="demo-section-border" style="background-color: #bcf77d">5</li>
<li class="demo-section-border" style="background-color: #7dd6f7">6</li>
<li class="demo-section-border" style="background-color: #ea7df7">7</li>
<li class="demo-section-border" style="background-color: #f77db4">8</li>
<li class="demo-section-border" style="background-color: #f7b97d">9</li>
<li class="demo-section-border" style="background-color: #f7887d">10</li>
<li class="demo-section-border" style="background-color: #7d8ef7">11</li>
<li class="demo-section-border" style="background-color: #b47df7">12</li>
<li class="demo-section-border" style="background-color: #f7ed7d">13</li>
<li class="demo-section-border" style="background-color: #7df7b9">14</li>
<li class="demo-section-border" style="background-color: #f77db1">15</li>
</ul>
页面无限滚动
文章段落很长，有时候会分割为多个网页，此时可使用逐步加载文章直至完全加载，操作方法如下：
- 1、对需要加载列表的父层追加
axInfinite属性（用js创建实例也可） - 2、使用
url参数引入pages文件地址，多个则以数组形式表示 - 3、使用
type=pages表明是pages异步模式 - 4、有必要使用
selector参数，以明确从页面哪个节点获取内容，可以是节点名(比如main)，#id或className
<div axInfinite='type:"pages",url:["pages/1.php","pages/2.php","pages/3.php","pages/4.php","pages/5.php","pages/6.php"]'>
<article class="post">
<h1>第一部分</h1>
<p>中国，是以华夏文明为源泉、中华文化为基础，并以汉族为主体民族的多民族国家，通用汉语、汉字，汉族与少数民族被统称为“中华民族”，又自称为炎黄子孙、龙的传人。</p>
<p>中国是世界四大文明古国之一，有着悠久的历史，距今约5000年前，以中原地区为中心开始出现聚落组织进而形成国家，后历经多次民族交融和朝代更迭，直至形成多民族国家的大一统局面。20世纪初辛亥革命后，君主政体退出历史舞台，共和政体建立。1949年中华人民共和国成立后，在中国大陆建立了人民代表大会制度的政体。</p>
<p>中国疆域辽阔、民族众多，先秦时期的华夏族在中原地区繁衍生息，到了汉代通过文化交融使汉族正式成型，奠定了中国主体民族的基础。后又通过与周边民族的交融，逐步形成统一多民族国家的局面，而人口也不断攀升，宋代中国人口突破一亿，清朝时期人口突破四亿，到2005年中国人口已突破十三亿。</p>
</article>
<article class="post">
<h1>第二部分</h1>
<p>中国文化渊远流长、博大精深、绚烂多彩，是东亚文化圈的文化宗主国，在世界文化体系内占有重要地位，由于各地的地理位置、自然条件的差异，人文、经济方面也各有特点。传统文化艺术形式有诗词、戏曲、书法、国画等，而春节、元宵、清明、端午、中秋、重阳等则是中国重要的传统节日。</p>
<p>中国一词最早见于西周初年的青铜器“何尊”铭文中的“余其宅兹中国，自之辟民”，同时又以“华夏”、“中华”、“中夏”、“中原”、“诸夏”、“诸华”、“神州”、“九州”、“海内”等的代称出现。</p>
<p>“华夏”一词最早见于周朝《尚书·周书·武成》，“华夏蛮貊，罔不率俾”。 《书经》曰：“冕服采装曰华，大国曰夏”。《尚书正义》注：“冕服华章曰华，大国曰夏”。“华”，是指华丽、兴旺；也有说上古华、夏同音，本一字。《左传》曰：“中国有礼仪之大，故称夏；有服章之美，谓之华。” 华是指汉服，夏指行周礼的大国，故中国有礼仪之邦、衣冠上国之美誉。</p>
</article>
<article class="post">
<h1>第三部分</h1>
<p>而汉语中的“中国”一词，最早指西周京畿地区，后演变为黄河流域黄河中下游的中原地区，中国以外则称为四夷，所谓“天子有道，守在四夷”。中国是居天地之中者曰中国，四夷是居天地之偏者。汉代始建蛮夷邱，并使汉字文化圈正式成型，南北朝建四夷馆，明代四夷馆，内分八馆，曰：鞑靼、女真、西番、西天、回回、百夷、高昌、缅甸。自近代的鸦片战争以来，中国作为东亚文化宗主的局势逐步被打破了。</p>
<p>中国的原始社会，起自大约170万年前的元谋人，止于公元前21世纪夏王朝的建立。原始社会经历了原始人群和氏族公社两个时期。氏族公社又经历了母系氏族公社和父系氏族公社两个阶段。</p>
<p>元谋人是已知的中国境内最早的人类。北京人是原始人群时期的典型。山顶洞人已经过着氏族公社的生活。长江流域的河姆渡氏族和黄河流域的半坡氏族是母系氏族公社的繁荣时期。大汶口文化的中晚期反映了父系氏族公社的情况。</p>
</article>
<article class="post">
<h1>第四部分</h1>
<p>传说中，黄帝是大约4500多年前，生活在黄河流域原始部落的部落联盟首领。他提倡种植五谷，驯养牲畜，促使这个部落联盟逐步强大。他曾率领部落打败黄河上游的炎帝部落和南方的蚩尤部落。后来炎帝部落和黄帝部落结成联盟，在黄河流域长期生活、繁衍，构成了以后华夏族的主干成分。黄帝被尊奉为华夏族的祖先。中华民族被称为炎黄子孙，就是这么来的。</p>
<p>黄帝以后，黄河流域部落联盟的杰出首领，先后有尧、舜、禹。那时候，部落联盟首领由推选产生。尧年老了，召开部落联盟会议，大家推举有才德的舜为继承人。尧死后，舜继承了尧的位置，舜年老了，也采取同样的办法把位置让给治水有功的禹。这种更替首领位置的办法，历史上叫做“禅让”。</p>
</article>
</div>
页面自动序号加载
通过配置url，使用“{start}”的方式自动获取页面地址，start是自动页面初始值。
比如url:ajax/{0}.html，那么插件将自动创建一个网址数组['ajax/0.html','ajax/1.html','ajax/2.html'...]，该数组的length等于20，可通过urlMax参数来修改length值。
<div axInfinite='type:"pages",url:"pages/{1}.php"'>
<article class="post">
<h1>第一部分</h1>
<p>中国，是以华夏文明为源泉、中华文化为基础，并以汉族为主体民族的多民族国家，通用汉语、汉字，汉族与少数民族被统称为“中华民族”，又自称为炎黄子孙、龙的传人。</p>
<p>中国是世界四大文明古国之一，有着悠久的历史，距今约5000年前，以中原地区为中心开始出现聚落组织进而形成国家，后历经多次民族交融和朝代更迭，直至形成多民族国家的大一统局面。20世纪初辛亥革命后，君主政体退出历史舞台，共和政体建立。1949年中华人民共和国成立后，在中国大陆建立了人民代表大会制度的政体。</p>
<p>中国疆域辽阔、民族众多，先秦时期的华夏族在中原地区繁衍生息，到了汉代通过文化交融使汉族正式成型，奠定了中国主体民族的基础。后又通过与周边民族的交融，逐步形成统一多民族国家的局面，而人口也不断攀升，宋代中国人口突破一亿，清朝时期人口突破四亿，到2005年中国人口已突破十三亿。</p>
</article>
<article class="post">
<h1>第二部分</h1>
<p>中国文化渊远流长、博大精深、绚烂多彩，是东亚文化圈的文化宗主国，在世界文化体系内占有重要地位，由于各地的地理位置、自然条件的差异，人文、经济方面也各有特点。传统文化艺术形式有诗词、戏曲、书法、国画等，而春节、元宵、清明、端午、中秋、重阳等则是中国重要的传统节日。</p>
<p>中国一词最早见于西周初年的青铜器“何尊”铭文中的“余其宅兹中国，自之辟民”，同时又以“华夏”、“中华”、“中夏”、“中原”、“诸夏”、“诸华”、“神州”、“九州”、“海内”等的代称出现。</p>
<p>“华夏”一词最早见于周朝《尚书·周书·武成》，“华夏蛮貊，罔不率俾”。 《书经》曰：“冕服采装曰华，大国曰夏”。《尚书正义》注：“冕服华章曰华，大国曰夏”。“华”，是指华丽、兴旺；也有说上古华、夏同音，本一字。《左传》曰：“中国有礼仪之大，故称夏；有服章之美，谓之华。” 华是指汉服，夏指行周礼的大国，故中国有礼仪之邦、衣冠上国之美誉。</p>
</article>
<article class="post">
<h1>第三部分</h1>
<p>而汉语中的“中国”一词，最早指西周京畿地区，后演变为黄河流域黄河中下游的中原地区，中国以外则称为四夷，所谓“天子有道，守在四夷”。中国是居天地之中者曰中国，四夷是居天地之偏者。汉代始建蛮夷邱，并使汉字文化圈正式成型，南北朝建四夷馆，明代四夷馆，内分八馆，曰：鞑靼、女真、西番、西天、回回、百夷、高昌、缅甸。自近代的鸦片战争以来，中国作为东亚文化宗主的局势逐步被打破了。</p>
<p>中国的原始社会，起自大约170万年前的元谋人，止于公元前21世纪夏王朝的建立。原始社会经历了原始人群和氏族公社两个时期。氏族公社又经历了母系氏族公社和父系氏族公社两个阶段。</p>
<p>元谋人是已知的中国境内最早的人类。北京人是原始人群时期的典型。山顶洞人已经过着氏族公社的生活。长江流域的河姆渡氏族和黄河流域的半坡氏族是母系氏族公社的繁荣时期。大汶口文化的中晚期反映了父系氏族公社的情况。</p>
</article>
<article class="post">
<h1>第四部分</h1>
<p>传说中，黄帝是大约4500多年前，生活在黄河流域原始部落的部落联盟首领。他提倡种植五谷，驯养牲畜，促使这个部落联盟逐步强大。他曾率领部落打败黄河上游的炎帝部落和南方的蚩尤部落。后来炎帝部落和黄帝部落结成联盟，在黄河流域长期生活、繁衍，构成了以后华夏族的主干成分。黄帝被尊奉为华夏族的祖先。中华民族被称为炎黄子孙，就是这么来的。</p>
<p>黄帝以后，黄河流域部落联盟的杰出首领，先后有尧、舜、禹。那时候，部落联盟首领由推选产生。尧年老了，召开部落联盟会议，大家推举有才德的舜为继承人。尧死后，舜继承了尧的位置，舜年老了，也采取同样的办法把位置让给治水有功的禹。这种更替首领位置的办法，历史上叫做“禅让”。</p>
</article>
</div>
从分页获得URL
可以将分页隐藏在加载器内部，页码的标签添加data-page属性以表示该标签href值将作为页面地址。
<div axInfinite='type:"pages",url:"pagination"'>
<article class="post">
<h1>第一部分</h1>
<p>中国，是以华夏文明为源泉、中华文化为基础，并以汉族为主体民族的多民族国家，通用汉语、汉字，汉族与少数民族被统称为“中华民族”，又自称为炎黄子孙、龙的传人。</p>
<p>中国是世界四大文明古国之一，有着悠久的历史，距今约5000年前，以中原地区为中心开始出现聚落组织进而形成国家，后历经多次民族交融和朝代更迭，直至形成多民族国家的大一统局面。20世纪初辛亥革命后，君主政体退出历史舞台，共和政体建立。1949年中华人民共和国成立后，在中国大陆建立了人民代表大会制度的政体。</p>
<p>中国疆域辽阔、民族众多，先秦时期的华夏族在中原地区繁衍生息，到了汉代通过文化交融使汉族正式成型，奠定了中国主体民族的基础。后又通过与周边民族的交融，逐步形成统一多民族国家的局面，而人口也不断攀升，宋代中国人口突破一亿，清朝时期人口突破四亿，到2005年中国人口已突破十三亿。</p>
</article>
<article class="post">
<h1>第二部分</h1>
<p>中国文化渊远流长、博大精深、绚烂多彩，是东亚文化圈的文化宗主国，在世界文化体系内占有重要地位，由于各地的地理位置、自然条件的差异，人文、经济方面也各有特点。传统文化艺术形式有诗词、戏曲、书法、国画等，而春节、元宵、清明、端午、中秋、重阳等则是中国重要的传统节日。</p>
<p>中国一词最早见于西周初年的青铜器“何尊”铭文中的“余其宅兹中国，自之辟民”，同时又以“华夏”、“中华”、“中夏”、“中原”、“诸夏”、“诸华”、“神州”、“九州”、“海内”等的代称出现。</p>
<p>“华夏”一词最早见于周朝《尚书·周书·武成》，“华夏蛮貊，罔不率俾”。 《书经》曰：“冕服采装曰华，大国曰夏”。《尚书正义》注：“冕服华章曰华，大国曰夏”。“华”，是指华丽、兴旺；也有说上古华、夏同音，本一字。《左传》曰：“中国有礼仪之大，故称夏；有服章之美，谓之华。” 华是指汉服，夏指行周礼的大国，故中国有礼仪之邦、衣冠上国之美誉。</p>
</article>
<article class="post">
<h1>第三部分</h1>
<p>而汉语中的“中国”一词，最早指西周京畿地区，后演变为黄河流域黄河中下游的中原地区，中国以外则称为四夷，所谓“天子有道，守在四夷”。中国是居天地之中者曰中国，四夷是居天地之偏者。汉代始建蛮夷邱，并使汉字文化圈正式成型，南北朝建四夷馆，明代四夷馆，内分八馆，曰：鞑靼、女真、西番、西天、回回、百夷、高昌、缅甸。自近代的鸦片战争以来，中国作为东亚文化宗主的局势逐步被打破了。</p>
<p>中国的原始社会，起自大约170万年前的元谋人，止于公元前21世纪夏王朝的建立。原始社会经历了原始人群和氏族公社两个时期。氏族公社又经历了母系氏族公社和父系氏族公社两个阶段。</p>
<p>元谋人是已知的中国境内最早的人类。北京人是原始人群时期的典型。山顶洞人已经过着氏族公社的生活。长江流域的河姆渡氏族和黄河流域的半坡氏族是母系氏族公社的繁荣时期。大汶口文化的中晚期反映了父系氏族公社的情况。</p>
</article>
<article class="post">
<h1>第四部分</h1>
<p>传说中，黄帝是大约4500多年前，生活在黄河流域原始部落的部落联盟首领。他提倡种植五谷，驯养牲畜，促使这个部落联盟逐步强大。他曾率领部落打败黄河上游的炎帝部落和南方的蚩尤部落。后来炎帝部落和黄帝部落结成联盟，在黄河流域长期生活、繁衍，构成了以后华夏族的主干成分。黄帝被尊奉为华夏族的祖先。中华民族被称为炎黄子孙，就是这么来的。</p>
<p>黄帝以后，黄河流域部落联盟的杰出首领，先后有尧、舜、禹。那时候，部落联盟首领由推选产生。尧年老了，召开部落联盟会议，大家推举有才德的舜为继承人。尧死后，舜继承了尧的位置，舜年老了，也采取同样的办法把位置让给治水有功的禹。这种更替首领位置的办法，历史上叫做“禅让”。</p>
</article>
<div class="ax-infinite-status">
<div class="ax-pagination">
<a href="pages/1.php" data-page>1</a><a href="pages/2.php" data-page>2</a><a href="pages/3.php" data-page>3</a>
<a href="pages/4.php" data-page>4</a><a href="pages/5.php" data-page>5</a><a href="pages/6.php" data-page>6</a>
</div>
</div>
</div>
独立按钮加载
默认是scroll滚动触发无限加载的，通过设置trigger参数，将触发方式改成click，此时加载后不再自动触发，而需要借助点击独立按钮激活无限加载实例。
-
<div id="clickIns"> <article class="post"> <h1>第一部分</h1> <p>中国，是以华夏文明为源泉、中华文化为基础，并以汉族为主体民族的多民族国家，通用汉语、汉字，汉族与少数民族被统称为“中华民族”，又自称为炎黄子孙、龙的传人。</p> <p>中国是世界四大文明古国之一，有着悠久的历史，距今约5000年前，以中原地区为中心开始出现聚落组织进而形成国家，后历经多次民族交融和朝代更迭，直至形成多民族国家的大一统局面。20世纪初辛亥革命后，君主政体退出历史舞台，共和政体建立。1949年中华人民共和国成立后，在中国大陆建立了人民代表大会制度的政体。</p> <p>中国疆域辽阔、民族众多，先秦时期的华夏族在中原地区繁衍生息，到了汉代通过文化交融使汉族正式成型，奠定了中国主体民族的基础。后又通过与周边民族的交融，逐步形成统一多民族国家的局面，而人口也不断攀升，宋代中国人口突破一亿，清朝时期人口突破四亿，到2005年中国人口已突破十三亿。</p> </article> <article class="post"> <h1>第二部分</h1> <p>中国文化渊远流长、博大精深、绚烂多彩，是东亚文化圈的文化宗主国，在世界文化体系内占有重要地位，由于各地的地理位置、自然条件的差异，人文、经济方面也各有特点。传统文化艺术形式有诗词、戏曲、书法、国画等，而春节、元宵、清明、端午、中秋、重阳等则是中国重要的传统节日。</p> <p>中国一词最早见于西周初年的青铜器“何尊”铭文中的“余其宅兹中国，自之辟民”，同时又以“华夏”、“中华”、“中夏”、“中原”、“诸夏”、“诸华”、“神州”、“九州”、“海内”等的代称出现。</p> <p>“华夏”一词最早见于周朝《尚书·周书·武成》，“华夏蛮貊，罔不率俾”。 《书经》曰：“冕服采装曰华，大国曰夏”。《尚书正义》注：“冕服华章曰华，大国曰夏”。“华”，是指华丽、兴旺；也有说上古华、夏同音，本一字。《左传》曰：“中国有礼仪之大，故称夏；有服章之美，谓之华。” 华是指汉服，夏指行周礼的大国，故中国有礼仪之邦、衣冠上国之美誉。</p> </article> <article class="post"> <h1>第三部分</h1> <p>而汉语中的“中国”一词，最早指西周京畿地区，后演变为黄河流域黄河中下游的中原地区，中国以外则称为四夷，所谓“天子有道，守在四夷”。中国是居天地之中者曰中国，四夷是居天地之偏者。汉代始建蛮夷邱，并使汉字文化圈正式成型，南北朝建四夷馆，明代四夷馆，内分八馆，曰：鞑靼、女真、西番、西天、回回、百夷、高昌、缅甸。自近代的鸦片战争以来，中国作为东亚文化宗主的局势逐步被打破了。</p> <p>中国的原始社会，起自大约170万年前的元谋人，止于公元前21世纪夏王朝的建立。原始社会经历了原始人群和氏族公社两个时期。氏族公社又经历了母系氏族公社和父系氏族公社两个阶段。</p> <p>元谋人是已知的中国境内最早的人类。北京人是原始人群时期的典型。山顶洞人已经过着氏族公社的生活。长江流域的河姆渡氏族和黄河流域的半坡氏族是母系氏族公社的繁荣时期。大汶口文化的中晚期反映了父系氏族公社的情况。</p> </article> <article class="post"> <h1>第四部分</h1> <p>传说中，黄帝是大约4500多年前，生活在黄河流域原始部落的部落联盟首领。他提倡种植五谷，驯养牲畜，促使这个部落联盟逐步强大。他曾率领部落打败黄河上游的炎帝部落和南方的蚩尤部落。后来炎帝部落和黄帝部落结成联盟，在黄河流域长期生活、繁衍，构成了以后华夏族的主干成分。黄帝被尊奉为华夏族的祖先。中华民族被称为炎黄子孙，就是这么来的。</p> <p>黄帝以后，黄河流域部落联盟的杰出首领，先后有尧、舜、禹。那时候，部落联盟首领由推选产生。尧年老了，召开部落联盟会议，大家推举有才德的舜为继承人。尧死后，舜继承了尧的位置，舜年老了，也采取同样的办法把位置让给治水有功的禹。这种更替首领位置的办法，历史上叫做“禅让”。</p> </article> </div> <p align="center"><button class="ax-btn ax-btn-primary ax-longer" id="more">查看更多</button></p> -
let btn = document.querySelector('#more'), clickIns = new axInfinite('#clickIns', { type:'pages', trigger: 'click', url: ["pages/1.php","pages/2.php","pages/3.php","pages/4.php","pages/5.php","pages/6.php"], }); btn.onclick = function(){ clickIns.active(); btn.remove(); }
一页一页加载
通过设置trigger参数为clicks，此时将取消滚动监听，通过点击下一页按钮加载页面。
-
<div id="clickIns"> <article class="post"> <h1>第一部分</h1> <p>中国，是以华夏文明为源泉、中华文化为基础，并以汉族为主体民族的多民族国家，通用汉语、汉字，汉族与少数民族被统称为“中华民族”，又自称为炎黄子孙、龙的传人。</p> <p>中国是世界四大文明古国之一，有着悠久的历史，距今约5000年前，以中原地区为中心开始出现聚落组织进而形成国家，后历经多次民族交融和朝代更迭，直至形成多民族国家的大一统局面。20世纪初辛亥革命后，君主政体退出历史舞台，共和政体建立。1949年中华人民共和国成立后，在中国大陆建立了人民代表大会制度的政体。</p> <p>中国疆域辽阔、民族众多，先秦时期的华夏族在中原地区繁衍生息，到了汉代通过文化交融使汉族正式成型，奠定了中国主体民族的基础。后又通过与周边民族的交融，逐步形成统一多民族国家的局面，而人口也不断攀升，宋代中国人口突破一亿，清朝时期人口突破四亿，到2005年中国人口已突破十三亿。</p> </article> <article class="post"> <h1>第二部分</h1> <p>中国文化渊远流长、博大精深、绚烂多彩，是东亚文化圈的文化宗主国，在世界文化体系内占有重要地位，由于各地的地理位置、自然条件的差异，人文、经济方面也各有特点。传统文化艺术形式有诗词、戏曲、书法、国画等，而春节、元宵、清明、端午、中秋、重阳等则是中国重要的传统节日。</p> <p>中国一词最早见于西周初年的青铜器“何尊”铭文中的“余其宅兹中国，自之辟民”，同时又以“华夏”、“中华”、“中夏”、“中原”、“诸夏”、“诸华”、“神州”、“九州”、“海内”等的代称出现。</p> <p>“华夏”一词最早见于周朝《尚书·周书·武成》，“华夏蛮貊，罔不率俾”。 《书经》曰：“冕服采装曰华，大国曰夏”。《尚书正义》注：“冕服华章曰华，大国曰夏”。“华”，是指华丽、兴旺；也有说上古华、夏同音，本一字。《左传》曰：“中国有礼仪之大，故称夏；有服章之美，谓之华。” 华是指汉服，夏指行周礼的大国，故中国有礼仪之邦、衣冠上国之美誉。</p> </article> <article class="post"> <h1>第三部分</h1> <p>而汉语中的“中国”一词，最早指西周京畿地区，后演变为黄河流域黄河中下游的中原地区，中国以外则称为四夷，所谓“天子有道，守在四夷”。中国是居天地之中者曰中国，四夷是居天地之偏者。汉代始建蛮夷邱，并使汉字文化圈正式成型，南北朝建四夷馆，明代四夷馆，内分八馆，曰：鞑靼、女真、西番、西天、回回、百夷、高昌、缅甸。自近代的鸦片战争以来，中国作为东亚文化宗主的局势逐步被打破了。</p> <p>中国的原始社会，起自大约170万年前的元谋人，止于公元前21世纪夏王朝的建立。原始社会经历了原始人群和氏族公社两个时期。氏族公社又经历了母系氏族公社和父系氏族公社两个阶段。</p> <p>元谋人是已知的中国境内最早的人类。北京人是原始人群时期的典型。山顶洞人已经过着氏族公社的生活。长江流域的河姆渡氏族和黄河流域的半坡氏族是母系氏族公社的繁荣时期。大汶口文化的中晚期反映了父系氏族公社的情况。</p> </article> <article class="post"> <h1>第四部分</h1> <p>传说中，黄帝是大约4500多年前，生活在黄河流域原始部落的部落联盟首领。他提倡种植五谷，驯养牲畜，促使这个部落联盟逐步强大。他曾率领部落打败黄河上游的炎帝部落和南方的蚩尤部落。后来炎帝部落和黄帝部落结成联盟，在黄河流域长期生活、繁衍，构成了以后华夏族的主干成分。黄帝被尊奉为华夏族的祖先。中华民族被称为炎黄子孙，就是这么来的。</p> <p>黄帝以后，黄河流域部落联盟的杰出首领，先后有尧、舜、禹。那时候，部落联盟首领由推选产生。尧年老了，召开部落联盟会议，大家推举有才德的舜为继承人。尧死后，舜继承了尧的位置，舜年老了，也采取同样的办法把位置让给治水有功的禹。这种更替首领位置的办法，历史上叫做“禅让”。</p> </article> </div> -
let clickIns = new axInfinite('#clickIns', { type: 'pages', trigger: 'clicks', url: ["pages/1.php","pages/2.php","pages/3.php","pages/4.php","pages/5.php","pages/6.php"], });
json异步无限加载
当更多列表信息存放在同域的json文件中，可使用json加载，操作方法如下：
- 1、对需要加载列表的父层追加
axInfinite属性（用js创建实例也可） - 2、使用
template参数引入渲染json的模板，该模板可写在js里或script标签里 - 3、使用
url参数引入json文件，多个则以数组形式表示 - 4、使用
type=json表明是json异步加载模式
json异步无限加载同样支持trigger=click或clicks触发方式。
-
<script type="text/template" id="jsonTpl"> <li> <div class="ax-info-block"> <div class="ax-row"> <div class="ax-col"><a href="<# this.href #>" class="ax-ell"><# this.title #></a></div> <span class="ax-arrow"><# this.click #>次</span> </div> </div> <div class="ax-break-line"></div> </li> </script> <ul axInfinite='type:"json",template:"#jsonTpl",url:["ajax/infinite01.json","ajax/infinite02.json"]'> <li> <div class="ax-info-block"> <div class="ax-row"> <div class="ax-col"><a href="###" class="ax-ell">2022-02-16,新加坡,Singapore,南航与英航签署联营合作协议代码共享</a></div> <span class="ax-arrow">26次</span> </div> </div> <div class="ax-break-line"></div> </li> <li> <div class="ax-info-block"> <div class="ax-row"> <div class="ax-col"><a href="###" class="ax-ell">2022-01-24,英国,United Kingdom,到英国大城小镇看“亮灯”</a></div> <span class="ax-arrow">45次</span> </div> </div> <div class="ax-break-line"></div> </li> <li> <div class="ax-info-block"> <div class="ax-row"> <div class="ax-col"><a href="###" class="ax-ell">2022-01-21,英国,United Kingdom,英国人喝茶不再流行贵族范</a></div> <span class="ax-arrow">56次</span> </div> </div> <div class="ax-break-line"></div> </li> <li> <div class="ax-info-block"> <div class="ax-row"> <div class="ax-col"><a href="###" class="ax-ell">2022-01-13,西班牙,Spain,西班牙斗牛与逗牛，精彩各不同</a></div> <span class="ax-arrow">481次</span> </div> </div> <div class="ax-break-line"></div> </li> <li> <div class="ax-info-block"> <div class="ax-row"> <div class="ax-col"><a href="###" class="ax-ell">2022-01-20,中国,China,出了转广州拍照，朋友以为我去了澳洲旅游！</a></div> <span class="ax-arrow">156次</span> </div> </div> <div class="ax-break-line"></div> </li> <li> <div class="ax-info-block"> <div class="ax-row"> <div class="ax-col"><a href="###" class="ax-ell">2022-01-11,古巴,Cuba,古巴自由行,在古巴旅游是一种怎样的体验?</a></div> <span class="ax-arrow">175次</span> </div> </div> <div class="ax-break-line"></div> </li> <li> <div class="ax-info-block"> <div class="ax-row"> <div class="ax-col"><a href="###" class="ax-ell">2022-01-29,中国,China,道北，洛阳人熟悉又陌生的地方，如今新面貌</a></div> <span class="ax-arrow">236次</span> </div> </div> <div class="ax-break-line"></div> </li> <li> <div class="ax-info-block"> <div class="ax-row"> <div class="ax-col"><a href="###" class="ax-ell">2022-01-25,日本,Japan,一边泡温泉一边看海景，来日本，体验独有的温泉文化</a></div> <span class="ax-arrow">96次</span> </div> </div> <div class="ax-break-line"></div> </li> <li> <div class="ax-info-block"> <div class="ax-row"> <div class="ax-col"><a href="###" class="ax-ell">2022-01-27,韩国,Korea,国际航线受阻，韩航空公司抢占国内航线</a></div> <span class="ax-arrow">452次</span> </div> </div> <div class="ax-break-line"></div> </li> <li> <div class="ax-info-block"> <div class="ax-row"> <div class="ax-col"><a href="###" class="ax-ell">2022-02-24,印度,India,巴厘岛“原始海滩”，海浪滔天，风景壮美，是绝佳的“冲浪秘境”</a></div> <span class="ax-arrow">42次</span> </div> </div> <div class="ax-break-line"></div> </li> </ul> -
[ { "title": "1", "href": "###", "click": 63 }, { "title": "2", "href": "###", "click": 81 }, { "title": "3", "href": "###", "click": 204 }, { "title": "4", "href": "###", "click": 365 }, { "title": "5", "href": "###", "click": 109 }, { "title": "6", "href": "###", "click": 981 }, { "title": "7", "href": "###", "click": 207 }, { "title": "8", "href": "###", "click": 260 }, { "title": "9", "href": "###", "click": 259 }, { "title": "10", "href": "###", "click": 391 }, { "title": "11", "href": "###", "click": 184 }, { "title": "12", "href": "###", "click": 368 }, { "title": "13", "href": "###", "click": 261 }, { "title": "14", "href": "###", "click": 715 }, { "title": "15", "href": "###", "click": 684 }, { "title": "16", "href": "###", "click": 246 }, { "title": "17", "href": "###", "click": 154 }, { "title": "18", "href": "###", "click": 815 }, { "title": "19", "href": "###", "click": 487 }, { "title": "20", "href": "###", "click": 685 }, { "title": "21", "href": "###", "click": 163 } ] -
[ { "title": "22", "href": "###", "click": 241 }, { "title": "23", "href": "###", "click": 259 }, { "title": "24", "href": "###", "click": 581 }, { "title": "25", "href": "###", "click": 48 }, { "title": "26", "href": "###", "click": 69 }, { "title": "27", "href": "###", "click": 841 }, { "title": "28", "href": "###", "click": 154 }, { "title": "29", "href": "###", "click": 325 }, { "title": "30", "href": "###", "click": 962 }, { "title": "31", "href": "###", "click": 459 }, { "title": "32", "href": "###", "click": 98 }, { "title": "33", "href": "###", "click": 1105 }, { "title": "34", "href": "###", "click": 965 }, { "title": "35", "href": "###", "click": 125 }, { "title": "36", "href": "###", "click": 854 }, { "title": "37", "href": "###", "click": 698 } ]
sql异步无限加载
当所有列表信息存放在数据表中，可以通过构建动态页面获取sql数据并返回前端显示。sql异步加载类似sql列表分页，操作方法如下：
- 1、对需要加载列表的父层追加
axInfinite属性（用js创建实例也可） - 2、使用
template参数引入渲染json的模板，该模板可写在js里或script标签里 - 3、使用
url参数引入动态文件地址 - 4、使用
type=sql表明是sql异步加载模式
注意要求动态页面返回的内容是带有data和end属性的对象，格式为{data:[{title:'',click:''},...],total:100}
data：是一个数组，即从sql获取数据的行数组total：数据表的行数，据此判断是否到了尾页
sql异步无限加载同样支持trigger=click或clicks触发方式。
-
<script type="text/template" id="sqlTpl"> <li> <div class="ax-info-block"> <div class="ax-row"> <div class="ax-col"><a href="<# this.href #>" class="ax-ell"><# this.newstime #>,<# this.cnname #>,<# this.enname #>,<# this.title #></a></div> <span class="ax-arrow"><# this.click #>次</span> </div> </div> <div class="ax-break-line"></div> </li> </script> <ul axInfinite='type:"sql",template:"#sqlTpl",url:"ajax/infinite.php"'></ul> -
<?php header("Content-Type:text/plain;charset=utf-8"); //连接数据库，数据库用户自己定义 $server="数据库服务器地址"; $username="数据库用户名"; $password="数据库密码"; $database="数据库名"; $table = '表名'; $connect = mysql_connect($server,$username,$password) or die("数据库链接错误"); mysql_select_db($database,$connect); mysql_query("set names 'utf8'"); //判断是否能取到数据 $getNum = mysql_query("select * from {$table} {$where}"); $itemsNum = mysql_num_rows($getNum); //检索最终数据 $sqlString="select * from {$table} limit {$_POST[start]},{$_POST[count]}"; $sql=mysql_query($sqlString); //根据数据生成对象数组 $result = array(); while ($row = mysql_fetch_object($sql)){ array_push($result,$row); } //最终返回类似{data:[{title:'',click:''},{title:'',click:''}...],total:100}的对象 $object = array('data' => $result,'total' => $itemsNum); $success = json_encode($object); echo $success; ?>
点击这里可直接下载所需的sql文件。
操作方法
支持1个操作方法：active(url,callback)。该操作方法通常用于type=click的时候。如果type!=scroll，那么无限滚动初始化之后并不会随着浏览器滚动而有变化，需要借助外部的按钮点击触发才会激活无限滚动。
参数url可以是地址数组或者一个地址。
参数callback是回调监听，无参数。
-
<div id="clickIns"> <article class="post"> <h1>第一部分</h1> <p>中国，是以华夏文明为源泉、中华文化为基础，并以汉族为主体民族的多民族国家，通用汉语、汉字，汉族与少数民族被统称为“中华民族”，又自称为炎黄子孙、龙的传人。</p> <p>中国是世界四大文明古国之一，有着悠久的历史，距今约5000年前，以中原地区为中心开始出现聚落组织进而形成国家，后历经多次民族交融和朝代更迭，直至形成多民族国家的大一统局面。20世纪初辛亥革命后，君主政体退出历史舞台，共和政体建立。1949年中华人民共和国成立后，在中国大陆建立了人民代表大会制度的政体。</p> <p>中国疆域辽阔、民族众多，先秦时期的华夏族在中原地区繁衍生息，到了汉代通过文化交融使汉族正式成型，奠定了中国主体民族的基础。后又通过与周边民族的交融，逐步形成统一多民族国家的局面，而人口也不断攀升，宋代中国人口突破一亿，清朝时期人口突破四亿，到2005年中国人口已突破十三亿。</p> </article> <article class="post"> <h1>第二部分</h1> <p>中国文化渊远流长、博大精深、绚烂多彩，是东亚文化圈的文化宗主国，在世界文化体系内占有重要地位，由于各地的地理位置、自然条件的差异，人文、经济方面也各有特点。传统文化艺术形式有诗词、戏曲、书法、国画等，而春节、元宵、清明、端午、中秋、重阳等则是中国重要的传统节日。</p> <p>中国一词最早见于西周初年的青铜器“何尊”铭文中的“余其宅兹中国，自之辟民”，同时又以“华夏”、“中华”、“中夏”、“中原”、“诸夏”、“诸华”、“神州”、“九州”、“海内”等的代称出现。</p> <p>“华夏”一词最早见于周朝《尚书·周书·武成》，“华夏蛮貊，罔不率俾”。 《书经》曰：“冕服采装曰华，大国曰夏”。《尚书正义》注：“冕服华章曰华，大国曰夏”。“华”，是指华丽、兴旺；也有说上古华、夏同音，本一字。《左传》曰：“中国有礼仪之大，故称夏；有服章之美，谓之华。” 华是指汉服，夏指行周礼的大国，故中国有礼仪之邦、衣冠上国之美誉。</p> </article> <article class="post"> <h1>第三部分</h1> <p>而汉语中的“中国”一词，最早指西周京畿地区，后演变为黄河流域黄河中下游的中原地区，中国以外则称为四夷，所谓“天子有道，守在四夷”。中国是居天地之中者曰中国，四夷是居天地之偏者。汉代始建蛮夷邱，并使汉字文化圈正式成型，南北朝建四夷馆，明代四夷馆，内分八馆，曰：鞑靼、女真、西番、西天、回回、百夷、高昌、缅甸。自近代的鸦片战争以来，中国作为东亚文化宗主的局势逐步被打破了。</p> <p>中国的原始社会，起自大约170万年前的元谋人，止于公元前21世纪夏王朝的建立。原始社会经历了原始人群和氏族公社两个时期。氏族公社又经历了母系氏族公社和父系氏族公社两个阶段。</p> <p>元谋人是已知的中国境内最早的人类。北京人是原始人群时期的典型。山顶洞人已经过着氏族公社的生活。长江流域的河姆渡氏族和黄河流域的半坡氏族是母系氏族公社的繁荣时期。大汶口文化的中晚期反映了父系氏族公社的情况。</p> </article> <article class="post"> <h1>第四部分</h1> <p>传说中，黄帝是大约4500多年前，生活在黄河流域原始部落的部落联盟首领。他提倡种植五谷，驯养牲畜，促使这个部落联盟逐步强大。他曾率领部落打败黄河上游的炎帝部落和南方的蚩尤部落。后来炎帝部落和黄帝部落结成联盟，在黄河流域长期生活、繁衍，构成了以后华夏族的主干成分。黄帝被尊奉为华夏族的祖先。中华民族被称为炎黄子孙，就是这么来的。</p> <p>黄帝以后，黄河流域部落联盟的杰出首领，先后有尧、舜、禹。那时候，部落联盟首领由推选产生。尧年老了，召开部落联盟会议，大家推举有才德的舜为继承人。尧死后，舜继承了尧的位置，舜年老了，也采取同样的办法把位置让给治水有功的禹。这种更替首领位置的办法，历史上叫做“禅让”。</p> </article> </div> <p align="center"><button class="ax-btn ax-btn-primary ax-longer" id="more" data-url="pages/1.php">查看更多</button></p> -
let btn = document.querySelector('#more'), clickIns = new axInfinite('#clickIns', { type:'pages', trigger: 'click', }); btn.onclick = function(){ let _this = this; clickIns.active(_this.dataset.url); btn.remove(); }
监听事件
本插件有若干监听方法，以on为关键字，实例后监听和在参数中监听效果相同。格式是：instance.on('event',function(){})；具体事件说明如下：
finished全部加载完成执行，无参数loaded一个URL数据加载完成，支持一个参数data，即URL的数据（json）shown列表中某一项显示，支持一个参数item，即正显示的节点activated激活无限滚动后执行，无参数
演示实例显示结果使用了console.log方法，请按下F12按键打开开发者工具中的“控制台”查看监听效果。
-
<ul id="on"> <li> <div class="ax-info-block"> <div class="ax-row"> <div class="ax-col"><a href="###" class="ax-ell">2022-02-16,新加坡,Singapore,南航与英航签署联营合作协议代码共享</a></div> <span class="ax-arrow">26次</span> </div> </div> <div class="ax-break-line"></div> </li> <li> <div class="ax-info-block"> <div class="ax-row"> <div class="ax-col"><a href="###" class="ax-ell">2022-01-24,英国,United Kingdom,到英国大城小镇看“亮灯”</a></div> <span class="ax-arrow">45次</span> </div> </div> <div class="ax-break-line"></div> </li> <li> <div class="ax-info-block"> <div class="ax-row"> <div class="ax-col"><a href="###" class="ax-ell">2022-01-21,英国,United Kingdom,英国人喝茶不再流行贵族范</a></div> <span class="ax-arrow">56次</span> </div> </div> <div class="ax-break-line"></div> </li> <li> <div class="ax-info-block"> <div class="ax-row"> <div class="ax-col"><a href="###" class="ax-ell">2022-01-13,西班牙,Spain,西班牙斗牛与逗牛，精彩各不同</a></div> <span class="ax-arrow">481次</span> </div> </div> <div class="ax-break-line"></div> </li> <li> <div class="ax-info-block"> <div class="ax-row"> <div class="ax-col"><a href="###" class="ax-ell">2022-01-20,中国,China,出了转广州拍照，朋友以为我去了澳洲旅游！</a></div> <span class="ax-arrow">156次</span> </div> </div> <div class="ax-break-line"></div> </li> <li> <div class="ax-info-block"> <div class="ax-row"> <div class="ax-col"><a href="###" class="ax-ell">2022-01-11,古巴,Cuba,古巴自由行,在古巴旅游是一种怎样的体验?</a></div> <span class="ax-arrow">175次</span> </div> </div> <div class="ax-break-line"></div> </li> <li> <div class="ax-info-block"> <div class="ax-row"> <div class="ax-col"><a href="###" class="ax-ell">2022-01-29,中国,China,道北，洛阳人熟悉又陌生的地方，如今新面貌</a></div> <span class="ax-arrow">236次</span> </div> </div> <div class="ax-break-line"></div> </li> <li> <div class="ax-info-block"> <div class="ax-row"> <div class="ax-col"><a href="###" class="ax-ell">2022-01-25,日本,Japan,一边泡温泉一边看海景，来日本，体验独有的温泉文化</a></div> <span class="ax-arrow">96次</span> </div> </div> <div class="ax-break-line"></div> </li> <li> <div class="ax-info-block"> <div class="ax-row"> <div class="ax-col"><a href="###" class="ax-ell">2022-01-27,韩国,Korea,国际航线受阻，韩航空公司抢占国内航线</a></div> <span class="ax-arrow">452次</span> </div> </div> <div class="ax-break-line"></div> </li> <li> <div class="ax-info-block"> <div class="ax-row"> <div class="ax-col"><a href="###" class="ax-ell">2022-02-24,印度,India,巴厘岛“原始海滩”，海浪滔天，风景壮美，是绝佳的“冲浪秘境”</a></div> <span class="ax-arrow">42次</span> </div> </div> <div class="ax-break-line"></div> </li> </ul> -
let jsonTpl = ` <div class="ax-info-block"> <div class="ax-row"> <div class="ax-col"><a href="<# this.href #>" class="ax-ell"><# this.title #></a></div> <span class="ax-arrow"><# this.click #>次</span> </div> </div> <div class="ax-break-line"></div> </li> `, onBtn = document.querySelector('#onMore'), onIns = new axInfinite('#on', { trigger: 'click', type:'json', template: jsonTpl, url: ["ajax/infinite01.json", "ajax/infinite02.json"], }); onBtn.onclick = function () { onIns.active(); onBtn.remove(); } onIns.on('activated', function () { console.log('已经激活'); }).on('loaded', function (url) { console.log('已经加载了' + url.length + '条数据！'); }).on('shown', function (item) { console.log('显示：' + item.querySelector('.ax-ell').innerHTML); }).on('finished', function () { console.log('已经全部加载完毕！'); }); -
[ { "title": "1", "href": "###", "click": 63 }, { "title": "2", "href": "###", "click": 81 }, { "title": "3", "href": "###", "click": 204 }, { "title": "4", "href": "###", "click": 365 }, { "title": "5", "href": "###", "click": 109 }, { "title": "6", "href": "###", "click": 981 }, { "title": "7", "href": "###", "click": 207 }, { "title": "8", "href": "###", "click": 260 }, { "title": "9", "href": "###", "click": 259 }, { "title": "10", "href": "###", "click": 391 }, { "title": "11", "href": "###", "click": 184 }, { "title": "12", "href": "###", "click": 368 }, { "title": "13", "href": "###", "click": 261 }, { "title": "14", "href": "###", "click": 715 }, { "title": "15", "href": "###", "click": 684 }, { "title": "16", "href": "###", "click": 246 }, { "title": "17", "href": "###", "click": 154 }, { "title": "18", "href": "###", "click": 815 }, { "title": "19", "href": "###", "click": 487 }, { "title": "20", "href": "###", "click": 685 }, { "title": "21", "href": "###", "click": 163 } ] -
[ { "title": "22", "href": "###", "click": 241 }, { "title": "23", "href": "###", "click": 259 }, { "title": "24", "href": "###", "click": 581 }, { "title": "25", "href": "###", "click": 48 }, { "title": "26", "href": "###", "click": 69 }, { "title": "27", "href": "###", "click": 841 }, { "title": "28", "href": "###", "click": 154 }, { "title": "29", "href": "###", "click": 325 }, { "title": "30", "href": "###", "click": 962 }, { "title": "31", "href": "###", "click": 459 }, { "title": "32", "href": "###", "click": 98 }, { "title": "33", "href": "###", "click": 1105 }, { "title": "34", "href": "###", "click": 965 }, { "title": "35", "href": "###", "click": 125 }, { "title": "36", "href": "###", "click": 854 }, { "title": "37", "href": "###", "click": 698 } ]
参数选项
document.addEventListener("DOMContentLoaded", function() {
var demo1 = new axInfinite('#ID',{
type: 'list', //无限滚动的内容类型，默认是当页list列表、异步pages、异步json文件、异步sql数据
offset: '0px', //偏离顶部或底部多长距离触发，单位px，如果只有一个值则上下偏移值相同，如果需要单独定义请用英文逗号隔开，比如'-50px,-30px'表示上方偏移50px，下方偏移30px
visible: [0], //可见区域占比，单位是小数，比如0.1表示目标10%的部分出现在屏幕中则触发
url: '', //加载的页面地址，可以是一个地址、地址数组、pagination或className（#id）
urlMax: 20,//url作为数组length最大值，默认20
data: [], //用于追加静态列表；该参数对type=list有效
template: null, //数组转Dom的模板
selector: '',//使用type=pages的时候需要确定从其他页面的哪个节点获取内容，默认为空则获取整个网页
trigger: 'scroll',//无限滚动触发方式，默认是scroll，可选择click，即加载不会触发，点击某个按钮之后才会触发；可选择clicks，即没点击一次加载一个页面，直到全部加载完毕
parent: null,//以什么父节点为参照，默认null表示以整个视窗为参照
animation: 'ax-fadeIn',//加载动画className，默认是ax-fadeIn渐显，可选择ax-scaleIn或ax-fadeInUp
start: 0,//从数据表获取数据时从第几条开始，默认是0，也就是从第一条开始；或者表示从url的数组第几个开始加载，0代表第一个
count: 10, //每次加载的信息数量，默认为10；该参数对type=sql有效
finishText: '没有更多内容了',//全部页面加载完毕之后resultDiv显示的文字内容
nextBtn: '<button class="ax-btn ax-btn-primary ax-longer">查看更多</button>',//下一页按钮的HTML
ajaxType:'post',//异步提交的方式，默认post，可填get
active:'',//是一个函数，激活无限滚动后的回调函数
});
});
以axMenu插件为例，如果在元素上通过ax*使用属性，需要使用类似json的写法，属性不需要使用引号，如果值是字符串需要使用引号包裹，如果值是数字、布尔值、null或undefined不需要引号；比如要设置active，那么在元素的ax*属性中应该这样书写：axMenu="active:2"