这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
这篇文章主要介绍了 js 实现加载更多功能的方法, 以实例演示了加载更多的代码实现, 非常具有实用价值, 需要的朋友可以参考下
项目的一个前端页面展示已购买商品时,要求能下拉加载更多。关于如何实现『加载更多』功能,网上有插件可用,例如比较著名的使用 iscroll.js 实现的上拉加载更多、下拉刷新功能。
但实际用起来却是很麻烦。由于是第三方插件,要按照对方定义的方法使用,用起来总感觉很不顺心。再加上 iscroll.js 本身并没有集成加载更多的功能,需要进行自行扩展。想继续使用 iscroll.js 实现加载更多功能的,上面给的链接可以看看。
h5 项目里需要实现简单的分页功能,由于是移动端,考虑用『加载更多』会更好,而不是 PC 端的翻页。
基于按钮实现加载更多
最简单的就是给一个加载更多的按钮,如果还有数据,点击下加载更多,继续拉几条数据;直到没有更多数据了,隐藏加载更多按钮。
效果如下:
页面 html:
- <div class="content">
- <div class="weui_panel weui_panel_access">
- <div class="weui_panel_hd">
- 文章列表
- </div>
- <div class="weui_panel_bd js-blog-list">
- </div>
- </div>
- <!--加载更多按钮-->
- <div class="js-load-more">
- 加载更多
- </div>
- </div>
- <script src="js/zepto.min.js">
- </script>
加载更多按钮样式:loadmore.CSS:
- @charset "utf-8";
- .js - load - more {
- padding: 0 15px;
- width: 120px;
- height: 30px;
- background - color: #D31733;
- color: #fff;
- line - height: 30px;
- text - align: center;
- border - radius: 5px;
- margin: 20px auto;
- border: 0 none;
- font - size: 16px;
- display: none;
- /*默认不显示,ajax调用成功后才决定显示与否*/
- }
加载更多的 js 代码:
- $(function() {
- /*初始化*/
- var counter = 0;
- /*计数器*/
- var pageStart = 0;
- /*offset*/
- var pageSize = 4;
- /*size*/
- /*首次加载*/
- getData(pageStart, pageSize);
- /*监听加载更多*/
- $(document).on('click', '.js-load-more',
- function() {
- counter++;
- pageStart = counter * pageSize;
- getData(pageStart, pageSize);
- });
- });
这里的代码并不多。其中 getData(pageStart, pageSize) 是业务逻辑代码,负责从服务端拉去数据。这里给个示例:
- function getData(offset, size) {
- $.ajax({
- type: 'GET',
- url: 'json/blog.json',
- dataType: 'json',
- success: function(reponse) {
- var data = reponse.list;
- var sum = reponse.list.length;
- var result = '';
- /****业务逻辑块:实现拼接html内容并append到页面*********/
- //console.log(offset , size, sum);
- /*如果剩下的记录数不够分页,就让分页数取剩下的记录数
- * 例如分页数是5,只剩2条,则只取2条
- *
- * 实际MySQL查询时不写这个不会有问题
- */
- if (sum - offset < size) {
- size = sum - offset;
- }
- /*使用for循环模拟SQL里的limit(offset,size)*/
- for (var i = offset; i < (offset + size); i++) {
- result += '<div class="weui_media_box weui_media_text">' + '<a href="' + data[i].url + '" target="_blank"><h4 class="weui_media_title">' + data[i].title + '</h4></a>' + '<p class="weui_media_desc">' + data[i].desc + '</p>' + '</div>';
- }
- $('.js-blog-list').append(result);
- /*******************************************/
- /*隐藏more按钮*/
- if ((offset + size) >= sum) {
- $(".js-load-more").hide();
- } else {
- $(".js-load-more").show();
- }
- },
- error: function(xhr, type) {
- alert('Ajax error!');
- }
- });
- }
还是比较简单的。
基于滚动事件实现加载更多
上面我们通过按钮点击实现加载更多,整体过程还是比较简单的。这里,我提供另一种方法实现加载更多:基于于滚动 (scroll) 事件。
直接贴代码了:
- $(function() {
- /*初始化*/
- var counter = 0;
- /*计数器*/
- var pageStart = 0;
- /*offset*/
- var pageSize = 7;
- /*size*/
- var isEnd = false;
- /*结束标志*/
- /*首次加载*/
- getData(pageStart, pageSize);
- /*监听加载更多*/
- $(window).scroll(function() {
- if (isEnd == true) {
- return;
- }
- // 当滚动到最底部以上100像素时, 加载新内容
- // 核心代码
- if ($(document).height() - $(this).scrollTop() - $(this).height() < 100) {
- counter++;
- pageStart = counter * pageSize;
- getData(pageStart, pageSize);
- }
- });
- });
可以看出,代码变化不大,主要看核心代码里的判断条件:当滚动到最底部以上 100 像素时, 加载新内容。
业务逻辑 getData(pageStart, pageSize) 只需要把 if ((offset + size) >= sum) 里面的逻辑改成:
- if ((offset + size) >= sum) {
- isEnd = true; //没有更多了
- }
就行了。
当然,这里面还有要优化的地方,例如:如何防止滚动过快,服务端没来得及响应造成多次请求?
综合实例
通过上面的例子,显然第二种更好,不用去点击。但是第二个方法有个问题:
如果设置页面大小每次显示 2 条或 3 条 (size=2),总记录是 20,你会发现无法触发向下滚动加载更多的逻辑。这时候有个加载更多的点击按钮就好了。
因此,我们可以把以上两种方法合在一起:
默认使用滚动事件实现加载更多,当显示数目太小不足以触发向下滚动加载更多的逻辑时,使用加载更多点击事件。
这里,我对加载更多这个行为进行简单的抽象,写了个简单的插件:
loadmore.js
- /*
- * loadmore.js
- * 加载更多
- *
- * @time 2016-4-18 17:40:25
- * @author 飞鸿影~
- * @email jiancaigege@163.com
- * 可以传的参数默认有:size,scroll 可以自定义
- * */
- ; (function(w, $) {
- var loadmore = {
- /*单页加载更多 通用方法
- *
- * @param callback 回调方法
- * @param config 自定义参数
- * */
- get: function(callback, config) {
- var config = config ? config: {};
- /*防止未传参数报错*/
- var counter = 0;
- /*计数器*/
- var pageStart = 0;
- var pageSize = config.size ? config.size: 10;
- /*默认通过点击加载更多*/
- $(document).on('click', '.js-load-more',
- function() {
- counter++;
- pageStart = counter * pageSize;
- callback && callback(config, pageStart, pageSize);
- });
- /*通过自动监听滚动事件加载更多,可选支持*/
- config.isEnd = false;
- /*结束标志*/
- config.isAjax = false;
- /*防止滚动过快,服务端没来得及响应造成多次请求*/
- $(window).scroll(function() {
- /*是否开启滚动加载*/
- if (!config.scroll) {
- return;
- }
- /*滚动加载时如果已经没有更多的数据了、正在发生请求时,不能继续进行*/
- if (config.isEnd == true || config.isAjax == true) {
- return;
- }
- /*当滚动到最底部以上100像素时, 加载新内容*/
- if ($(document).height() - $(this).scrollTop() - $(this).height() < 100) {
- counter++;
- pageStart = counter * pageSize;
- callback && callback(config, pageStart, pageSize);
- }
- });
- /*第一次自动加载*/
- callback && callback(config, pageStart, pageSize);
- },
- }
- $.loadmore = loadmore;
- })(window, window.jQuery || window.Zepto);
如何使用呢?很简单:
- $.loadmore.get(getData, {
- scroll: true,
- //默认是false,是否支持滚动加载
- size: 7,
- //默认是10
- flag: 1,
- //自定义参数,可选,示例里没有用到
- });
第一个参数是回调函数,即我们的业务逻辑。我把最终修改过的业务逻辑方法贴出来:
- function getData(config, offset, size) {
- config.isAjax = true;
- $.ajax({
- type: 'GET',
- url: 'json/blog.json',
- dataType: 'json',
- success: function(reponse) {
- config.isAjax = false;
- var data = reponse.list;
- var sum = reponse.list.length;
- var result = '';
- /************业务逻辑块:实现拼接html内容并append到页面*****************/
- //console.log(offset , size, sum);
- /*如果剩下的记录数不够分页,就让分页数取剩下的记录数
- * 例如分页数是5,只剩2条,则只取2条
- *
- * 实际MySQL查询时不写这个
- */
- if (sum - offset < size) {
- size = sum - offset;
- }
- /*使用for循环模拟SQL里的limit(offset,size)*/
- for (var i = offset; i < (offset + size); i++) {
- result += '<div class="weui_media_box weui_media_text">' + '<a href="' + data[i].url + '" target="_blank"><h4 class="weui_media_title">' + data[i].title + '</h4></a>' + '<p class="weui_media_desc">' + data[i].desc + '</p>' + '</div>';
- }
- $('.js-blog-list').append(result);
- /*******************************************/
- /*隐藏more*/
- if ((offset + size) >= sum) {
- $(".js-load-more").hide();
- config.isEnd = true;
- /*停止滚动加载请求*/
- //提示没有了
- } else {
- $(".js-load-more").show();
- }
- },
- error: function(xhr, type) {
- alert('Ajax error!');
- }
- });
- }
来源: http://www.phperz.com/article/17/0715/330838.html