Question

我在项目中使用<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>

的抽屉的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);
}

Nativescript ListView在页面加载时加载更多内容

1 个答案: