前端vue里面点击加载更多_js实现『加载更多』功能实例
DEMO : 滚动加载示例
关于如何实现『加载更多』功能,网上有插件可用,例如比较著名的使用iscroll.js实现的上拉加载更多、下拉刷新功能。
但实际用起来却是很麻烦。由于是第三方插件,要按照对方定义的方法使用,用起来总感觉很不顺心。再加上iscroll.js本身并没有集成加载更多的功能,需要进行自行扩展。想继续使用iscroll.js实现加载更多功能的,上面给的链接可以看看。
h5项目里需要实现简单的分页功能,由于是移动端,考虑用『加载更多』会更好,而不是PC端的翻页。
基于按钮实现加载更多
最简单的就是给一个加载更多的按钮,如果还有数据,点击下加载更多,继续拉几条数据;直到没有更多数据了,隐藏加载更多按钮。
这里提前准备好数据。
演示数据格式:blog.json
{
"list": [
{
"title": "这是title",
"url": "http://www.cnblogs.com/52fhy/p/5271447.html",
"desc": "摘要"
},
{
"title": "这是title2",
"url": "http://www.cnblogs.com/52fhy/p/4823390.html",
"desc": "摘要"
}]
}
页面html:
加载更多按钮样式: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 +='
'
'+ data[i].title +'
'+
'
'+ data[i].desc +'
'+
'
';
}
$('.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,你会发现无法触发向下滚动加载更多的逻辑。这时候有个加载更多的点击按钮就好了。
因此,我们可以把以上两种方法合在一起:
默认使用滚动事件实现加载更多,当显示数目太小不足以触发向下滚动加载更多的逻辑时,使用加载更多点击事件。
DEMO : 综合实例
这里,我对加载更多这个行为进行简单的抽象,写了个简单的插件:
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 +='
'
'+ data[i].title +'
'+
'
'+ data[i].desc +'
'+
'
';
}
$('.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!');
}
});
}
基本上与最初写的是一样的。
示例代码托管在Github: https://github.com/52fhy/loadmore
— 全文完 —
作者:飞鸿影
前端vue里面点击加载更多_js实现『加载更多』功能实例相关推荐
- 前端vue里面点击加载更多_vue 原生添加滚动加载更多
vue中添加滚动加载更多,因为是单页面所以需要在跳出页面时候销毁滚动,要不会出现错乱.我们在mounted建立滚动,destroyed销毁滚动. mounted () { window.addEven ...
- vue点击按钮怎么跳转图片_vue-router组件里面点击一个按钮跳转到一个新的组件该怎么实现...
展开全部 直接修改地址栏中的路由地址即可: {{msg}} var testLogin = Vue.component("login",{ template:` 这是我的登录页面 ...
- 解决ECSHOP后台订单里面点击编辑配送方式时出现的警告问题
警告内容:Warning: number_format() expects parameter 1 to be double, string given in D:\wamp\www\ecshop_o ...
- Android中fragment A里面点击button跳转到fragment B实现方法
在我们做项目的时候总是会有一些需求,改动.前段时间有个需求是首页的一个按钮点击跳转进入一个fragment,这个fragment和首页属于同一级. eg:也就是说我的首页几个fragment,首页记为 ...
- 前端Vue项目中点击a标签实现下载文件到本地的功能
点击a标签可实现下载图片或者是文件到本地的功能 1.根据后台提供的接口url下载文件到本地 <a :href="后台给接口提供的文件的url地址">点击下载文件< ...
- Web前端-Vue ElementUI点击Table 索引行获取index处理
需求:在table中row行 index = 0 ,作为区头,数据字符展示 "--" 参考组件 Element - The world's most popular Vue UI ...
- 这个程序我在华为mate8里面点击按钮会出现闪退求助多谢
治旁科粤纶秃翱艘 https://www.gn00.com/archiver/tid-1041746.html 糖叶写谰教仪崩丶 https://www.gn00.com/t-1041746-1-1. ...
- html里面点击重置按钮无反应,点击重置按钮后没反应.
HTML> javascript body{font-size:12px;} #txt{ height:400px; width:600px; border:#333 solid 1px; pa ...
- 小程序前端Vue里使用u-upload进行多图片上传
1.标签代码如下: <!--fileList存放图片集合--> <!--action图片上传请求方法--> <!--onRemove删除预览图片--> <!- ...
最新文章
- torch量化训练后导出onnx模型并运行
- 浅析Block的内部结构 , 及分析其是如何利用 NSInvocation 进行调用
- zedboard--zynq使用自带外设IP让ARM PS访问FPGA(八) 转载
- 认识线程 java 1615387415
- 局域网如何通过SSH 2连接上VMware 10虚拟机新装的centOS系统远程登录
- C语言随笔小算法:单项链表如何实现队列
- css之div兼容性问题
- 软件工程——第六次作业——团队作业
- MTK 如何更换开机 LOGO?
- 凤凰职教网计算机一级成绩查询,一-凤凰职教网.PPT
- IDEA连接kerberos环境的HDFS集群报错整理
- java redis哨兵配置_redis哨兵配置主从
- 电脑桌面便签怎么修改便签字体颜色?
- C语言 迷宫问题 (广度优先算法)
- VMware提示【该虚拟机似乎正在使用中】的解决方案
- SPDK Delay Bdev 介绍及应用实例
- 苹果又一波奇葩Bug来袭:小心你的备忘录被清空!
- 理解ROM,PROM,EPROM,EEPROM,RAM,DRAM,SRAM,FLASH是什么
- 在一个递增有序的线性表中,有数值相同的元素存在。若存储方式为单链表,设计算法,去掉数值相同的元素,使得表中不再有重复的元素。
- AJAX框架眼镜穿搭夏天,20套夏天穿搭!我帮你整理出来了
热门文章
- e之美,数学里的 e 为什么叫做自然底数?是不是自然界里什么东西恰好是 e?
- Cadence Allegro SPB 16.6高速下载+补丁+破解Crack教程
- cakephp视图用php文件,cakephp使用笔记
- 网页消重算法(via北大天网课题组)
- 名编辑电子杂志大师教程 | 制作好的电子杂志如何输出以及发布?
- Service-Oriented Architecture:面向服务的架构(SOA)是一个组件模型
- 专访沈逸:技术,不存在有前途没前途之分
- Myeclipse下载github上项目到本地(图解)
- 为什么数据线连接电脑只能充电
- 管家婆辉煌ⅡTOP本单据或后续单据已经生成了凭证,不能修改删除