欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

微信小程序上滑加載下拉刷新(onscrollLower)分批加載數(shù)據(jù)(一)

 更新時間:2017年05月11日 11:44:37   投稿:lqh  
這篇文章主要介紹了微信小程序上滑加載下拉刷新(onscrollLower)分批加載數(shù)據(jù)的相關(guān)資料,需要的朋友可以參考下

微信小程序上滑加載下拉刷新(onscrollLower)分批加載數(shù)據(jù)(一)

頁面緩存的設(shè)置優(yōu)化了頁面加載,減少了頻繁的調(diào)取接口,使用戶在斷網(wǎng)的情況下有更好的體驗(yàn)。

每個微信小程序都可以有自己的本地緩存,可以通過 wx.setStorage(wx.setStorageSync)、wx.getStorage(wx.getStorageSync)、wx.clearStorage(wx.clearStorageSync)可以對本地緩存進(jìn)行設(shè)置、獲取和清理。本地緩存最大為10MB。

注意: localStorage 是永久存儲的,但是我們不建議將關(guān)鍵信息全部存在 localStorage,以防用戶換設(shè)備的情況。

項(xiàng)目需求

通過使用scroll-view 自定義的鼠標(biāo)滾動事件onscrollLower,監(jiān)聽頁面下拉事件

page.init()的方法里封裝了請求數(shù)據(jù)的接口,后臺api文檔自帶分頁pageSize,默認(rèn)值為10,-1為請求全部數(shù)據(jù)。

說明:

觸發(fā)下滑事件通過與頁面data緩存數(shù)據(jù)對比,去請求接口。

代碼實(shí)現(xiàn)

var n=0
 page.init = function(callback) {
 page.data.loading = true;
 n+=10;
 cardService.listFavoriteCards(n,function(result){
 var cards = result.data.favoriteCards; 
 var starCards = result.data.starCards;

 starCards.sort(function(c1,c2){
 var c1Name = pinyingUtil.getInitials.convertPinyin(c1.name);
 var c2Name = pinyingUtil.getInitials.convertPinyin(c2.name);

 return c1Name > c2Name ? 1 : -1;
 });

 if(starCards && starCards.length> 0) {
 starCards.forEach(function(c){
 var compressEntName = dictService.compressEntName(c.companyName);
 c.compressEntName = compressEntName;
 });
 }

 page.setData({
 "favoriteCards" : cards,
 "starCards" : starCards,
 "filterType" : "name",
 "groups" : cardService.groupCardsByNameFirstLetter(cards),
 "loadding":false
 });
 wx.setStorageSync("setgroups",page.data.groups)
 });
 };

}

onLoad: function (options) {

 var geigroups=wx.getStorageSync('setgroups')
 var result =[]
 for(var i=0; i<geigroups.length; i+=5){
 result.push(geigroups.slice(i,i+5));
 }
 var resultd=result[0]
 if(geigroups){ 
 page.setData({
 "groups" : resultd
 }); 
 console.log('緩存')
 }else{
 if (wx.getStorageSync("token")) {
 page.init();
 page.initProfile();
 } else {
 App.addListener("evt_login", function () {
 page.init();
 page.initProfile();
 });
 }
 console.log('正常')
 }
}

onscrollLower:function(){
 var page = this;
 var geigroups=wx.getStorageSync('setgroups') //第一步拿數(shù)據(jù)
 var result =[] //定義空數(shù)組
 var n=0; //定義index
 for(var i=0; i<geigroups.length; i+=10){
 result.push(geigroups.slice(i,i+10));
 } //把數(shù)據(jù)每10個一組push到 result里面
 n+=1;

 var q=this.data.groups.length;
 if(geigroups){ //如果有緩存
 if(geigroups.length<=q) //如果當(dāng)前data的數(shù)據(jù)少于緩存執(zhí)行以下命令
 if (wx.getStorageSync("token")) { //如果有token請求數(shù)據(jù)
 page.init();
 page.initProfile();
 } else {
 App.addListener("evt_login", function () { //監(jiān)聽用戶登陸以后 請求數(shù)據(jù)
 page.init();
 page.initProfile();
 });
 }

 }else{
 page.setData({
 "groups" : result[n], 
 }); 
 }
 },

總結(jié)

加載數(shù)據(jù)的幾種方法:

方法一:onPullDownRefresh和onReachBottom方法實(shí)現(xiàn)小程序下拉加載和上拉刷新

方法二:在scroll-view里設(shè)定bindscrolltoupper和bindscrolltolower實(shí)現(xiàn)微信小程序下拉

因項(xiàng)目需求采用方法二去實(shí)現(xiàn),結(jié)合本地儲存是這次的難點(diǎn),希望對大家有幫助,有不足的地方大家多提建議,共勉。

 相關(guān)文章:微信小程序上滑加載下拉刷新(onscrollLower)分批加載數(shù)據(jù)(二)

感謝閱讀,希望能幫助到大家,謝謝大家對本站的支持!

相關(guān)文章

  • 微信小程序 input輸入及動態(tài)設(shè)置按鈕的實(shí)現(xiàn)

    微信小程序 input輸入及動態(tài)設(shè)置按鈕的實(shí)現(xiàn)

    這篇文章主要介紹了微信小程序 input輸入及動態(tài)設(shè)置按鈕的實(shí)現(xiàn)的相關(guān)資料,希望通過本文能幫助到大家,需要的朋友可以參考下
    2017-10-10
  • JS深入淺出Function與構(gòu)造函數(shù)

    JS深入淺出Function與構(gòu)造函數(shù)

    這篇文章主要介紹了JS深入淺出Function與構(gòu)造函數(shù),F(xiàn)unction是一個構(gòu)造函數(shù),可以通過該構(gòu)造函數(shù)去創(chuàng)建一個函數(shù),創(chuàng)建的函數(shù)是一個Function對象,具體內(nèi)容請參考下面文章的詳細(xì)內(nèi)容,需要的朋友可以參考一下
    2021-12-12
  • JS中的every()對空數(shù)組總返回true原理分析

    JS中的every()對空數(shù)組總返回true原理分析

    這篇文章主要為大家介紹了JS中的every()對空數(shù)組總返回true原理分析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2023-09-09
  • 微信小程序 加載 app-service.js 錯誤解決方法

    微信小程序 加載 app-service.js 錯誤解決方法

    這篇文章主要介紹了微信小程序 加載 app-service.js 錯誤詳解的相關(guān)資料,在開發(fā)微信小程序過程中出現(xiàn)了app-services.js的錯誤,并解決此問題,需要的朋友可以參考下
    2016-10-10
  • Web應(yīng)用開發(fā)TypeScript使用詳解

    Web應(yīng)用開發(fā)TypeScript使用詳解

    這篇文章主要為大家介紹了Web應(yīng)用開發(fā)TypeScript的使用詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2022-05-05
  • 微前端qiankun改造日漸龐大的項(xiàng)目教程

    微前端qiankun改造日漸龐大的項(xiàng)目教程

    這篇文章主要為大家介紹了微前端qiankun改造日漸龐大的項(xiàng)目教程示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2022-06-06
  • 帶你理解JavaScript 原型原型鏈

    帶你理解JavaScript 原型原型鏈

    理解js中原型、原型鏈這個概念,絕對是幫助我們更深入學(xué)習(xí)js的必要一步,比如,如果js開發(fā)者想理解js繼承,new關(guān)鍵字原理,甚至封裝組件、優(yōu)化代碼,弄明白js中原型、原型鏈更是前提條件。本篇文章,用最簡潔的文字,清楚明白講解原型鏈相等關(guān)系和原型、原型鏈存在的意義
    2021-09-09
  • 微信小程序 獲取相冊照片實(shí)例詳解

    微信小程序 獲取相冊照片實(shí)例詳解

    這篇文章主要介紹了微信小程序 獲取相冊照片實(shí)例詳解的相關(guān)資料,需要的朋友可以參考下
    2016-11-11
  • JS前端使用canvas實(shí)現(xiàn)擴(kuò)展物體類和事件派發(fā)

    JS前端使用canvas實(shí)現(xiàn)擴(kuò)展物體類和事件派發(fā)

    這篇文章主要為大家介紹了JS前端使用canvas實(shí)現(xiàn)擴(kuò)展物體類和事件派發(fā)示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2022-08-08
  • 將HTML自動轉(zhuǎn)為JS代碼

    將HTML自動轉(zhuǎn)為JS代碼

    將HTML自動轉(zhuǎn)為JS代碼...
    2006-06-06

最新評論