原創聲明:本文為作者原創,未經允許不得轉載,經授權轉載需注明作者和出處
對于刷微博刷朋友圈的吃瓜群眾,一定很了解這個功能吧,為防止流量走光光,只有當我滑到頁面底部的時候才再次加載更多的數據,這里我寫了一個低配版仿cnode社區的小程序,通過例子來解釋該如何玩
1、進入頁面,先加載個15條數據(這里調用的api在cnode社區有提供)
在后臺封裝一個getMoreData()方法,這個方法也是關鍵所在,在最后再告訴大家,現在只要知道每次調用這個方法頁面就會多加載15條數據
這就是第一次加載友好的彈出一個loading框,然后加載15條數據顯示
現在的問題是怎么判斷頁面滑倒了底部,正好
scroll-view標簽中有個屬性
這個屬性可以監聽當頁面滑倒底部的時候執行后面自定義的方法,我的自定義方法名是lower
和onload里的方法差不多
最后就是重點了,也是我入坑的地方
這是我的data
第一個參數的格式是[{xxx:”xxx”,yyy:”yyy”,zzz,”zzz”},{},{},{},{},{},{}]
第二個參數是調用api需要用到的參數,這里就不去解釋,主要是第一個
我本以為只要在getMoreData()里面將數據添加到arr_all就可以了,于是我直接用js的知識,對這個數組進行了填充
意思就是本來是arr_all[15條數據]
通過數組下標繼續寫入值arr_all[15條數據,下標+1,下標+2]
結果:
好消息,每次下拉都能加載更多的數據
壞消息,頁面上并不會渲染出新查出來的數據
所以證明不只是寫入數據那么簡單
想要在頁面上自動渲染出自己增加的東西,就得使用官方的方法setData進行重新賦值才會有效果
在這里,我就使用了concat來連接數組重新在setData賦值
(注:填充數據的方法不止一種,但是想要渲染在頁面上目前我覺得必須用setData)
效果:
看到滾動條就知道數據成功的渲染在頁面上了
coding的地址:https://git.coding.net/toBeMN/MINA-imitate-cnode-community.git
有什么不妥和改進的地方歡迎提出來,大家一起研究
補充說明:此方法為scrollview的加載方式,只需設置標簽scrollview的bindscrolltoupper和bindscrolltolower屬性即可
還有另外一種頁面的加載方式,區別在于這是對于整個頁面的加載,需要設置app.json文件:”enablePullDownRefresh”:”true”,并且固定上拉下拉加載的執行方法名為:onPullDownRefresh()和onReachBottom()