Framework7 索引列表外掛程式的非同步載入實現

2022-03-07 16:25:32 字數 1721 閱讀 7255

framework7 作為移動端的開發框架的優良之處已經無需多言。現在已經有了 react 和 vue 版本,之前在專案中用過 f7 + vue 的開發方式,無論是效率還是產出都近乎完美。有時間的話可以單獨寫篇文章詳細介紹 framework7,並與其它框架做對比。

對於 framework7 外掛程式的開發我就不多言了,官方文件很詳細。framework7 的外掛程式開發確實很簡單,但有些需要特殊對待的問題,我想通過索引外掛程式這個例子簡單說說我的解決方法。

索引列表在移動端算是比較常見的需求,我在工作中也遇到了這個需求,框架選用的是 framework7,所以就直接用這個現成的外掛程式了。外掛程式**如下:

framework7.prototype.plugins.indexedlist = function

var $ =window.dom7;

function

initindexedlist(page)

return

}; };

初始化 framework7:

framework7();

framework7 的外掛程式都是在 f7 初始化之後立即執行,所以動態生成的資料就有問題了。雖然官方文件提供了很多鉤子,但都不太合適。整個列表應該是獲取介面資料之後動態生成的,所以為了保證先載入資料再執行 framework7,我最初想到的方法就是等到頁面所有資料都請求完成之後再初始化 framework7,不過這種方式稍微有些不友好。

$.when(ajax1,ajax2,ajax3).done(function

(res1,res2,res3));

});

最後的辦法只能是修改外掛程式,最終嘗試了很長時間才找到辦法。初始化 f7 時可以給外掛程式傳遞引數,如下:

framework7(

});這樣的話我們可以在外掛程式函式執行之前加乙個判斷:

framework7.prototype.plugins.indexedlist = function

var $ =window.dom7;

//the plugin will not initialize automaticly

if (!params.init) return

;

function

initindexedlist(page)

return

};};

framework7.prototype.plugins.indexedlist = function

var $ =window.dom7;

//the plugin will not initialize automaticly

if (!params.init) return

;

function

initindexedlist(page)

initindexedlist(params);

};

外掛程式修改後的呼叫方式,初始化 f7 時可以將外掛程式的init設為false

var

indexedlist = new

framework7(

});

這樣就可以在動態獲取資料之後的**函式中呼叫外掛程式了。

github:

framework7 下拉重新整理 無限滾動

下拉重新整理圖示 案例1 案例2 複製 js 複製 複製 無限滾動 html 複製 無限滾動容器 案例1 案例2 案例3 案例4 預載入器 複製 js 複製 複製 解釋 pageinit function e,done 代表文件就緒函式 ptr content on ptr refresh func...

framework7 總結之前遇到的問題和踩過的坑

官網上寫的案例比較簡單明瞭,我這裡就將我使用時踩過的坑做乙個總結,與大家共勉!最近使用framework,基本全靠瀏覽官方文件,當然,有遇到了許多的錯誤,開始不知道 出問題也很著急,到最後發現問題其實就是乙個特別特別小的地方,但是也就是因為這一點點沒有做好,整個專案都執行不起來,今天在這裡就簡單總結...

python中反向索引 列表索引和反向索引

python與索引 我一直在研究乙個普通的python 來將資料從csv中分離出來。我的目標是使用多種策略重新建立這段 以便更好地理解python。稍後將對該 進行改進。我的 是有效的,但有一些事情我不明白。這裡是 with open c my super secret path primary d...