【Kissy WaterFall】实行手动加载数据

前言:由于Kissy WaterFall默认是监听滚动事件来实现数据动态加载的,但是有一些情况要用到手动加载数据。以下是使用Kissy WaterFall实现手动加载数据的方法。


最终实现效果:点击”逛更多的商店“会动态加载数据


步骤:

  1. 当一页数据加载完成后停止监听滚动事件
    	//加载一页数据完成后触发的事件waterfall.on('addComplete', function () {S.log('after add complete!');waterfall.pause();});

  2. 为按钮绑定重启监听滚动事件
    	//加载更多按钮$("#button_container_more").on('click',function(){	waterfall.resunme();});

  3. 附录:waterfall.pause()与water.resunme()的说明(从官网上转载的)
    pause()函数和resunme()函数属于插件里的waterfall.loader对象的

    resunme() :继续开始监控scroll事件(随时可能会动态加载)
    pause() :停止监控scroll事件(停止动态加载)

    参考网址:http://docs.kissyui.com/docs/html/api/component/waterfall/loader.html#waterfall.Waterfall.prototype.pause





出现问题:按照以上来完成的话,当点击”加载更多“按钮时,只是启动了滚动监听。意思就是,要加载数据,一要点击按钮,二要再次滚动鼠标。这样的用户体验很差。


解决办法:修改按钮动作:new一个waterfall.loader,重新赋值waterfall对象,再重新绑定addComplete事件。

代码如下:

	$("#button_container_more").on('click',function(){	waterfall = new Waterfall.Loader({container:"#ColumnContainer",load:function (success, end) {$('#loadingPins').show();$('.loader').hide();S.ajax({data:{'method':'flickr.photos.search','api_key':'5d93c2e473e39e9307e86d4a01381266','tags':'rose','page':nextpage,'per_page':20,'format':'json'},url:'http://api.flickr.com/services/rest/',dataType:"jsonp",jsonp:"jsoncallback",success:function (d) {// 如果数据错误, 则立即结束if (d.stat !== 'ok') {alert('load data error!');end();return;}// 如果到最后一页了, 也结束加载nextpage = d.photos.page + 1;if (nextpage > d.photos.pages) {end();return;}// 拼装每页数据var items = [];S.each(d.photos.photo, function (item) {/*所用到的字段:**price**height**collection**title**src*/item.height = Math.round(Math.random() * (300 - 180) + 180); // fake height	item.collection = 10;	//测试用item.price = 1800;		//测试用items.push(S.substitute(tpl,item));});success(items);},complete:function () {$('#loadingPins').hide();$('.loader').show();}});},minColCount:2,colWidth:175//align:'left' // right, center (default)});waterfall.on('addComplete', function () {S.log('after add complete!');waterfall.pause();});		});


最终整个脚本文件:

KISSY.use("waterfall,ajax,node,button", function (S, Waterfall, io,  Node, Button) {var $ = Node.all;var tpl = $('#tpl').html(),nextpage = 1,waterfall = new Waterfall.Loader({container:"#ColumnContainer",load:function (success, end) {$('#loadingPins').show();S.ajax({data:{'method':'flickr.photos.search','api_key':'5d93c2e473e39e9307e86d4a01381266','tags':'rose','page':nextpage,'per_page':20,'format':'json'},url:'http://api.flickr.com/services/rest/',dataType:"jsonp",jsonp:"jsoncallback",success:function (d) {// 如果数据错误, 则立即结束if (d.stat !== 'ok') {alert('load data error!');end();return;}// 如果到最后一页了, 也结束加载nextpage = d.photos.page + 1;if (nextpage > d.photos.pages) {end();return;}// 拼装每页数据var items = [];S.each(d.photos.photo, function (item) {/*所用到的字段:**price**height**collection**title**src*/item.height = Math.round(Math.random() * (300 - 180) + 180); // fake height	item.collection = 10;	//测试用item.price = 1800;		//测试用items.push(S.substitute(tpl,item));});success(items);},complete:function () {$('#loadingPins').hide();}});},minColCount:2,colWidth:175//align:'left' // right, center (default)});waterfall.on('adjustComplete', function () {S.log('after adjust complete!');});//加载一页数据完成后触发的事件waterfall.on('addComplete', function () {S.log('after add complete!');waterfall.pause();});// scrollTo$('#BackToTop').on('click', function (e) {e.halt();e.preventDefault();$(window).stop();$(window).animate({scrollTop:0}, 1, "easeOut");});//加载更多按钮$("#button_container_more").on('click',function(){	waterfall = new Waterfall.Loader({container:"#ColumnContainer",load:function (success, end) {$('#loadingPins').show();$('.loader').hide();S.ajax({data:{'method':'flickr.photos.search','api_key':'5d93c2e473e39e9307e86d4a01381266','tags':'rose','page':nextpage,'per_page':20,'format':'json'},url:'http://api.flickr.com/services/rest/',dataType:"jsonp",jsonp:"jsoncallback",success:function (d) {// 如果数据错误, 则立即结束if (d.stat !== 'ok') {alert('load data error!');end();return;}// 如果到最后一页了, 也结束加载nextpage = d.photos.page + 1;if (nextpage > d.photos.pages) {end();return;}// 拼装每页数据var items = [];S.each(d.photos.photo, function (item) {/*所用到的字段:**price**height**collection**title**src*/item.height = Math.round(Math.random() * (300 - 180) + 180); // fake height	item.collection = 10;	//测试用item.price = 1800;		//测试用items.push(S.substitute(tpl,item));});success(items);},complete:function () {$('#loadingPins').hide();$('.loader').show();}});},minColCount:2,colWidth:175//align:'left' // right, center (default)});waterfall.on('addComplete', function () {S.log('after add complete!');waterfall.pause();});		});//收藏按钮功能var collect;$('#ColumnContainer').delegate("mouseover", ".collect", function (event) {var w = $(event.currentTarget).children("span");var text = w.text();if(text >= 0){collect = text;}w.replaceWith("<span class='collects'>收藏</span>");//w.css("text-indent","3px");});$('#ColumnContainer').delegate("mouseout", ".collect", function (event) {var w = $(event.currentTarget).children("span");w.replaceWith("<span class='collectionAmount'>"+collect+"</span>");//w.css("text-indent","13px");});});


转载于:https://www.cnblogs.com/JerryC/p/3832149.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/378069.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

web服务器文档根目录在哪里,web服务器根目录在哪

web服务器根目录在哪 内容精选换一换SSL证书通过在客户端浏览器和Web服务器之间建立一条SSL安全通道(访问方式为HTTPS)&#xff0c;实现数据信息在客户端和服务器之间的加密传输&#xff0c;可以防止数据信息的泄露。SSL保证了双方传递信息的安全性&#xff0c;而且用户可以通过…

console java_Java Console writer()方法与示例

console java控制台类writer()方法 (Console Class writer() method) writer() method is available in java.io package. writer()方法在java.io包中可用。 writer() method is used to get a distinct PrintWriter object linked with this Console. writer()方法用于获取与此…

二、图片加载与保存

一、基本概念 1&#xff0c;什么是图片&#xff1f; 答&#xff1a;图像是结构化存储的数据信息 2&#xff0c;图像的属性 答&#xff1a;1、通道数目&#xff0c;2、宽与高&#xff0c;3、像素数据&#xff0c;4、图像类型 二、加载显示图像并保存 import cv2 import nump…

LeetCode 206. 反转链表 思考分析

题目 反转一个单链表。 示例: 输入: 1->2->3->4->5->NULL 输出: 5->4->3->2->1->NULL 进阶: 你可以迭代或递归地反转链表。你能否用两种方法解决这道题&#xff1f; 迭代双指针 从某公众号&#xff08;代码随想录&#xff09;搬过来的gif图&…

hdu 2846 Repository 字典树的变形

Repository Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/65536 K (Java/Others)                  Total Submission(s): 1129 Accepted Submission(s): 382 Problem DescriptionWhen you go shopping, you can search in repository…

怎样看虚拟主机的服务器,虚拟主机怎么查看服务器类型

虚拟主机怎么查看服务器类型 内容精选换一换使用华为云提供的公共镜像制作私有镜像时&#xff0c;您需先购买云主机等云资源时镜像选择公共镜像、云服务器类型建议统一选择“s3 (通用计算型)”&#xff0c;在云主机安装部署完商品&#xff0c;然后参照以下方式进行私有镜像制作…

Win32动态库 Lib文件哪去了

最近使用SQLite&#xff0c;用源文件.c和.h编译SQLite的动态库&#xff0c;编译后发现没有Lib文件。 原来&#xff1a;SQLite的.c文件没有引用.h文件&#xff0c;添加引用&#xff0c;编译&#xff0c;Lib文件有了。转载于:https://www.cnblogs.com/yunuoyuhan/p/3204457.html

console java_Java Console format()方法与示例

console java控制台类format()方法 (Console Class format() method) format() method is available in java.io package. format()方法在java.io包中可用。 format() method is used to write the formatted string to this Console with the help of the given string format…

Anaconda自带Python编译器Jupyter Notebook显示代码行数

ESC&#xff1a;进入命令行模式&#xff1b;按下H即可显示各种快捷键信息 Enter&#xff1a;进入编辑模式 方法一&#xff1a;命令方法 一、点击代码段&#xff0c;按ESC&#xff0c;使代码段显示蓝色&#xff0c;进入命令行模式 二、按下ShiftL&#xff0c;显示代码行数 方法…

ajax 服务器响应,ajax-服务器响应

如果需要获得了来自服务器的响应&#xff0c;则使用XMLHttpRequest 对象的 responseText 或 responseXML 属性responseText&#xff1a;获得字符串形式的响应数据&#xff0c;当readyState属性值变为4时&#xff0c;responseText属性才可用&#xff0c;表明Ajax请求已经结束例&…

(转)MOMO的Unity3D研究院之深入理解Unity脚本的执行顺序(六十二)

http://www.xuanyusong.com/archives/2378 Unity是不支持多线程的&#xff0c;也就是说我们必须要在主线程中操作它&#xff0c;可是Unity可以同时创建很多脚本&#xff0c;并且可以分别绑定在不同的游戏对象身上&#xff0c;他们各自都在执行自己的生命周期感觉像是多线程&…

SQL/MongoDB 连接并发测试

最近一直在搞mongodb 文件服务器大量文件并发上传测试&#xff0c;在官方文档发现mongo是线程安全的&#xff0c;支持单一连接下的并发操作。印象ADO.NET 似乎不支持单一连接并发。于是&#xff0c;测试一下来证实这个疑虑。&#xff08;前两篇小记一直纠结mongodb吃内存导致并…

【C、C++基础】什么时候用 “.” 什么时候用“->”(3个实例搞懂)

从堆栈的角度来说&#xff1a; 从堆栈的角度来说&#xff1a; 对象放在堆上&#xff0c;就要用指针&#xff0c;也就是对象指针->函数&#xff1b; 放在栈上,就对象.函数 那么如何判断对象放在堆上还是栈上&#xff1f; 从我的另一篇笔记【C grammar】C简化内存模型可知&am…

java clone方法_Java Calendar clone()方法与示例

java clone方法日历类clone()方法 (Calendar Class clone() method) clone() method is available in java.util package. clone()方法在java.util包中可用。 clone() method is used to return the cloned object of this Calendar object. clone()方法用于返回此Calendar对象…

三、Numpy数组操作

一、对图片各个像素点的像素值进行操作 image.shape[0]&#xff1a;image图像的height image.shape[1]&#xff1a;image图像的width image.shape[2]&#xff1a;image图像的channels import cv2 import numpy as npdef access_pixels(image):print(image.shape)height imag…

picacg服务器维护,picacg的服务器地址是什么

弹性云服务器 ECS弹性云服务器(Elastic Cloud Server)是一种可随时自助获取、可弹性伸缩的云服务器&#xff0c;帮助用户打造可靠、安全、灵活、高效的应用环境&#xff0c;确保服务持久稳定运行&#xff0c;提升运维效率三年低至5折&#xff0c;多种配置可选了解详情用户数据注…

Redis-Sampler:深入了解你的Redis存储

redis-sampler 是Redis作者antirez 同学开发的一个ruby 小工具&#xff0c;用于对Redis存储概况进行抽样检测并给出分析结果。 项目地址&#xff1a;https://github.com/antirez/redis-sampler 使用方式&#xff1a; 下载源码&#xff0c;执行下面命令&#xff1a; ./redis-sam…

二叉树笔记(深度遍历与广度遍历+13道leetcode题目(深度3道、广度10道))

本文章为结合leetcode题目以及公众号“代码随想录”的文章所做的笔记&#xff01; 感觉代码随想录的题目整理真的很好&#xff0c;比自己盲目刷题好很多。 目录1、二叉树小记1、满二叉树与完全二叉树2、二叉搜索树3、平衡二叉搜索树AVL4、二叉树存储方式5、二叉树遍历方式6、二…

ZZ的计算器

Problem Description ZZ自从上大学以来&#xff0c;脑容量就是以SB计算的&#xff0c;这个吃货竟然连算术运算也不会了&#xff0c;可是当今的计算机可是非常强大的&#xff0c;作为ACMer&#xff0c; 几个简单的算术又算得了什么呢&#xff1f;可是该怎么做呢&#xff1f;ZZ只…

kotlin 覆盖属性_Kotlin程序| 方法覆盖的示例

kotlin 覆盖属性方法重载 (Method Overriding) Method overriding allows derived class has the same function name and signature as the base class 方法重写允许派生类具有与基类相同的函数名称和签名 By method overriding we can provide different implementation into…