Nativescript ListView的加載更多頁面加載

Question

我在我的項目中，在視圖的XML文件中使用<ListView>。
ListView有一個屬性，當您向下滾動到足以查看ListView的最後一個項目時調用一個函數。

更多解釋：列表視圖包含模板項目，顯示兩個元素，一個是<Label>而另一個是<Image>

問題：是，當我打開應用程序，它加載多次。 ¿什麼原因以及如何防止？

home.xml

<drawer:rad-side-drawer id="drawer"> 
<drawer:rad-side-drawer.mainContent> 

    <!-- Home page contents --> 
    <stack-layout loaded="contentLoaded"> 

    <ListView items="{{ photoList }}" id="photoList" row="1" colSpan="2" loadMoreItems="loadMorePhotos"> 
     <ListView.itemTemplate> 
      <GridLayout columns="*, auto" rows="auto,*"> 
       <Label row="0" imageid="{{id}}" text="{{title}}"/> 
       <Image row="1" stretch="fill" src="{{picture}}"/> 
      </GridLayout> 
     </ListView.itemTemplate> 
    </ListView> 

    </stack-layout> 

</drawer:rad-side-drawer.mainContent> 
<drawer:rad-side-drawer.drawerContent> 
    <widgets:drawer-content /> 
</drawer:rad-side-drawer.drawerContent> 

抽屜的content.xml

<grid-layout class="drawer-content"> 
    <stack-layout> 
     <!-- <label text="Home" tap="navigate" class="{{ selectedPage == 'home' ? 'selected' : '' }}" /> --> 
     <ListView items="{{ menuList }}" id="menuList" row="1" colSpan="2"> 
      <ListView.itemTemplate> 
       <GridLayout columns="*, auto"> 
        <Label text="{{ title }}" galleryid="{{id}}" tap="loadPhotos"/> 
       </GridLayout> 
      </ListView.itemTemplate> 
     </ListView> 
    </stack-layout> 
</grid-layout> 

個

home.js

var MenuViewModel = require("../../shared/view-models/menu-view-model"); 
var PhotoViewModel = require("../../shared/view-models/photo-view-model"); 
var LoadingIndicator = require("nativescript-loading-indicator").LoadingIndicator; 
var BasePage = require("../../shared/BasePage"); 
var observableModule = require("data/observable") 
var ObservableArray = require("data/observable-array").ObservableArray; 
var topmost = require("ui/frame").topmost; 

var loader = new LoadingIndicator(); 
var loading_options = { 
    message: 'دریافت اطلاعات ...', 
    progress: 1, 
    android: { 
     indeterminate: false, 
     cancelable: false, 
     progressStyle: 0, 
     secondaryProgress: 1 
    }, 
    ios: { 
     details: "", 
     square: false, 
     margin: 10, 
     dimBackground: true, 
     color: "#4B9ED6", 
     mode: 0 // indeterminate 
    } 
}; 

var menuList = new MenuViewModel([]); 
var photoList = new PhotoViewModel([]); 
var current_gallery_id = 1; 
var current_page = 1; 
var isLoading = false; 

var pageData = new observableModule.fromObject({ 
    menuList: menuList, 
    photoList: photoList, 
    page_title: 'آلبوم عکس', 
    current_gallery_id: current_gallery_id, 
    current_page: current_page, 
}); 


var HomePage = function() { 

}; 

HomePage.prototype = new BasePage(); 
HomePage.prototype.constructor = HomePage; 

// Place any code you want to run when the home page loads here. 
HomePage.prototype.contentLoaded = function (args) { 

} 

HomePage.prototype.pageLoaded = function (args) { 
    page = args.object; 
    page.bindingContext = pageData; 
    loader.show(loading_options); 
    menuList.empty(); 
    menuList.load().then(function() { 
     loader.hide(); 
    }); 
}; 

HomePage.prototype.loadPhotos = function (args) { 
    var gallery_id = args.object.galleryid.toString(); 


    photoList.empty(); 
    page.getViewById("drawer").toggleDrawerState(); 

    if (current_gallery_id != gallery_id) { 
     current_gallery_id = gallery_id; 
     current_page = 1; 

     console.log("Gallery Changed to : " + current_gallery_id); 
    } 

    loader.show(loading_options); 
    photoList.load(gallery_id, current_page).then(function() { 
     current_page++; 
     console.log("Page Changed To : " + current_page); 
     loader.hide(); 
     return; 
    }); 


} 

HomePage.prototype.loadMorePhotos = function (args) { 

    var gallery_id = current_gallery_id; 
    loader.show(loading_options); 
    photoList.load(gallery_id, current_page).then(function() { 
     current_page++; 
     console.log("Page Changed To : " + current_page); 
     console.log("Gallery is : " + gallery_id); 
     loader.hide(); 
    }); 
} 


module.exports = new HomePage(); 

調試控制檯

Answer 1

嘗試使用timeout防止loadMorePhotos從貝因摹叫過很多次..

var timeout = setTimeout(loadMorePhotos, 100); 

    clearTimeout(timeout); 

你的情況：

function getMorePhotos(){ 
    var gallery_id = current_gallery_id; 
    loader.show(loading_options); 
    photoList.load(gallery_id, current_page).then(function() { 
    current_page++; 
    console.log("Page Changed To : " + current_page); 
    console.log("Gallery is : " + gallery_id); 
    loader.hide(); 
    }); 

}; 

HomePage.prototype.loadMorePhotos = function (args) { 
    var timeout = setTimeout(getMorePhotos, 100); 
    clearTimeout(timeout); 
}