前言：由于Kissy WaterFall默認(rèn)是監(jiān)聽(tīng)滾動(dòng)事件來(lái)實(shí)現(xiàn)數(shù)據(jù)動(dòng)態(tài)加載的，但是有一些情況要用到手動(dòng)加載數(shù)據(jù)。以下是使用Kissy WaterFall實(shí)現(xiàn)手動(dòng)加載數(shù)據(jù)的方法。

最終實(shí)現(xiàn)效果：點(diǎn)擊”逛更多的商店“會(huì)動(dòng)態(tài)加載數(shù)據(jù)

步驟：

當(dāng)一頁(yè)數(shù)據(jù)加載完成后停止監(jiān)聽(tīng)滾動(dòng)事件 //加載一頁(yè)數(shù)據(jù)完成后觸發(fā)的事件waterfall.on('addComplete', function () {S.log('after add complete!');waterfall.pause();});

為按鈕綁定重啟監(jiān)聽(tīng)滾動(dòng)事件 //加載更多按鈕$("#button_container_more").on('click',function(){ waterfall.resunme();});

附錄：waterfall.pause()與water.resunme()的說(shuō)明（從官網(wǎng)上轉(zhuǎn)載的）
pause()函數(shù)和resunme()函數(shù)屬于插件里的waterfall.loader對(duì)象的

resunme() ：繼續(xù)開(kāi)始監(jiān)控scroll事件（隨時(shí)可能會(huì)動(dòng)態(tài)加載）
pause() ：停止監(jiān)控scroll事件（停止動(dòng)態(tài)加載）

參考網(wǎng)址：http://docs.kissyui.com/docs/html/api/component/waterfall/loader.html#waterfall.Waterfall.prototype.pause

出現(xiàn)問(wèn)題：按照以上來(lái)完成的話，當(dāng)點(diǎn)擊”加載更多“按鈕時(shí)，只是啟動(dòng)了滾動(dòng)監(jiān)聽(tīng)。意思就是，要加載數(shù)據(jù)，一要點(diǎn)擊按鈕，二要再次滾動(dòng)鼠標(biāo)。這樣的用戶體驗(yàn)很差。

解決辦法：修改按鈕動(dòng)作：new一個(gè)waterfall.loader，重新賦值waterfall對(duì)象，再重新綁定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) {// 如果數(shù)據(jù)錯(cuò)誤, 則立即結(jié)束if (d.stat !== 'ok') {alert('load data error!');end();return;}// 如果到最后一頁(yè)了, 也結(jié)束加載nextpage = d.photos.page + 1;if (nextpage > d.photos.pages) {end();return;}// 拼裝每頁(yè)數(shù)據(jù)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; //測(cè)試用item.price = 1800; //測(cè)試用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();}); });

最終整個(gè)腳本文件：

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) {// 如果數(shù)據(jù)錯(cuò)誤, 則立即結(jié)束if (d.stat !== 'ok') {alert('load data error!');end();return;}// 如果到最后一頁(yè)了, 也結(jié)束加載nextpage = d.photos.page + 1;if (nextpage > d.photos.pages) {end();return;}// 拼裝每頁(yè)數(shù)據(jù)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; //測(cè)試用item.price = 1800; //測(cè)試用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!');});//加載一頁(yè)數(shù)據(jù)完成后觸發(fā)的事件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) {// 如果數(shù)據(jù)錯(cuò)誤, 則立即結(jié)束if (d.stat !== 'ok') {alert('load data error!');end();return;}// 如果到最后一頁(yè)了, 也結(jié)束加載nextpage = d.photos.page + 1;if (nextpage > d.photos.pages) {end();return;}// 拼裝每頁(yè)數(shù)據(jù)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; //測(cè)試用item.price = 1800; //測(cè)試用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");});});

轉(zhuǎn)載于:https://www.cnblogs.com/JerryC/p/3832149.html

總結(jié)

以上是生活随笔為你收集整理的【Kissy WaterFall】实行手动加载数据的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。