SUI的無限下拉和分頁效果的實現

2021-07-15 09:22:01 字數 1063 閱讀 9524

本專案是基於template.js模板和sui.js框架實現的,無限下拉在sui框架裡面也會有模擬,不過僅僅只是模擬,實際運用的話每次下拉的資料都是同一頁的,要實現分頁的效果就需要對其進行改造了。話不多說,直接上**:

html**:

-

兔兔團

js**:

require.config(

});define(['base','template','secmenu'], function (base,template,secmenu), //非同步返回給data

success: function (data)

});};

getdata(1, 6);

$(document).on('infinite', function ()

getdata(parseint(currpage + 1), 6);

//容器發生改變,如果是js滾動,需要重新整理滾動

$.refreshscroller();

},1000);

});$.init();

});var halltitledata =

var halltitle = template('halltitletemp', halltitledata);

document.getelementbyid('halltitle').innerhtml = halltitle;

});

定義的getdata函式就是進行ajax非同步載入,在函式後面第一次呼叫函式getdata(1, 6),當前頁傳入值為1,每頁載入資料傳入值為6,在sui框架自帶的infinite函式裡面,呼叫函式則是getdata(parseint(currpage + 1), 6),當前頁的傳入值為當前頁+1,

每頁載入資料傳入值為6不變,即每次都是載入6條資料。

核心是,在sui框架自帶的

infinite函式裡面,每次呼叫getdata函式,而此函式傳參就是當前頁和每頁載入資料數,並且每次非同步的返回給data,從而實現當前頁每次都會+1並且去載入不同的資料。

下拉列表的過渡效果

html結構 必須是這種結構,思路就是通過控制第二個盒子 在這兒是ul 的高度,實現上拉,下拉的效果,這兒只需要將設定為overflow hidden 再結合css3過渡就可以實現 方法1 當ul有固定高度,這時可以為ul新增class,然後再結合transition實現過渡 這是關鍵的css 這是...

ionic的側滑和下拉重新整理效果

一,側滑效果 主要涉及到三個地方 1,選單頁面 主要分為主頁面和側滑頁面兩部分,又分別都包含頂部bar和主要內容部分 0 在配置頁面記得,通過選單內容頁面的name,把選單和選單內容頁關聯起來 對於選單頁,設定的abstract true,暫時作用是不可以跳轉到此頁面 即不可以跳轉到menu.htm...

實現google的下拉列表效果

最簡做了個實現google下拉效果的程式,這樣的程式網上挺多,但是 不少,需要慢慢看。這裡貼一下我的,這個 借鑑 的部落格的 做了一下必要的修改。1 js 這個 主要是對於下拉列表的生成和操作,以及呼叫ajax介面 var menufocusindex 當前選中行 var arrylist 當前返回...