【uniapp】清單、下拉重新整理、上拉加載

uniapp之清單、下拉重新整理、上拉加載

1.在nvue頁面中

主要是利用 app的nvue專用元件來完成一個整體的功能

參考案例

新聞/資訊應用模闆（ps：案例中使用uni-list和uni-list-item推薦看元件源碼，這樣能更好了解整個使用方式）

優點

• 原生清單。 适合做長清單，性能高，對不可見部分的渲染資源回收有特殊的優化處理 。
• 各項功能元件化。由此展現出來功能設定非常靈活，強大的自定義能力。

缺點

• 開發上需要接受nvue的限制
• 強大的自定義和靈活性導緻整體使用上複雜度高，并不能做到簡單的接口調用（推薦封裝使用）

使用場景

• 複雜場景，對性能比較高的地方

2.scroll-view

scroll-view , 區域級别的滾動。有提供豐富上拉、下拉、各項鈎子函數。

優點

• 非常豐富的API
• 區域級别的滾動，使用上面很靈活，通常用在頁面局部區域
• 提供了幾種預設樣式

缺點

• 區域級别的重新整理, 在複雜的長清單下面會有性能問題

使用場景

頂部選項欄

3.頁面自帶的下拉、上拉

頁面生命周期 , 每個頁面自帶有上拉和下拉 ,展現為頁面的鈎子函數.

具體配置請看這裡下拉重新整理相關配置

優點

• 相比scroll-view的區域級滾動，頁面級别的滾動清單性能要好
• 無需引入多餘的代碼，接口簡單，作為生命周期直接提供給開發者使用
• 可以自定義下拉重新整理樣式, 提供了幾種預設樣式

缺點

• 正是因為簡單，是以自定義能力不夠強，下拉樣式不能做複雜logo和圖形, 如果有這種需求推薦考慮nvue元件實作
• 上拉和下拉功能是以一個頁面為基本機關的，不能做到細緻化的滾動

使用場景

單頁面清單 (或者是以單個頁面為基本的需求)

##4.前端模拟清單

主要來源是插件市場的各種前端模拟下拉重新整理方案

優點

• 熟悉的開發方式
• 超強大的自定義能力

缺點

• 性能上來看相比其他幾個要查
• 下拉重新整理可能會因為使用了部分原生元件而失效的問題 (比如層級上被覆寫)

5.特殊案例

插件市場的mescroll-uni , 這個插件使用量極高(但還是不支援nvue)