Nativescript ListView загружает больше при загрузке страницы

Я использую <ListView> в своем проекте в XML-файле представления.
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>



drawer-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();



Консоль отладки
вывод console.log(), когда я щелкаю элемент в ящике, чтобы получить список


nativescript javascript listview
person MahdiMP    schedule 03.01.2017    source источник
comment
он загружается несколько раз, значит, вы видите одни и те же элементы в прокрутке?   -  person Faouzi Oudouh    schedule 03.01.2017
comment
нет . он вызывает функцию, прикрепленную к loadMoreItems.   -  person MahdiMP    schedule 03.01.2017
comment
@faouzi-oudouh, спасибо.   -  person MahdiMP    schedule 03.01.2017

Ответы (1)


arrow_upward
2
arrow_downward

Попробуйте использовать 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);
}
person Faouzi Oudouh    schedule 03.01.2017
comment
это должно работать, но проблема для меня в том, что loadMorePhotos не находится в глобальном контексте. он принадлежит домашней странице. однако я установил setTimeout(HomePage.loadMorePhotos, 100). это не работает.. - person MahdiMP; 03.01.2017
comment
Куда вы положили setTimeout ? - person Faouzi Oudouh; 03.01.2017
comment
я определил другие функции в глобальном контексте. функция loadMore(args){//установить здесь время ожидания} . и этот прикреплен к атрибуту loadmore представления списка - person MahdiMP; 03.01.2017
comment
не работает . просто отображает само представление списка с первыми элементами, извлеченными из модели представления. высота просмотра списка даже не соответствует высоте страницы, и кажется, что при загрузке больше никогда не происходит. - person MahdiMP; 03.01.2017