在 nativescript-pager 中动态添加项目会破坏视图顺序

Posted 2023-04-14

【中文标题】在 nativescript-pager 中动态添加项目会破坏视图顺序

【英文标题】：Adding items dynamically in nativescript-pager screws up view order

【发布时间】：2020-02-15 11:28:29

【问题描述】：

我在寻呼机中使用分页，但这似乎破坏了整个寻呼机。 我用一些简单的数据做了一个测试。 预期的行为是从 1 开始计数到 ​​7，然后从 1 重新开始计数到 ​​7。 像这样：1,2,3,4,5,6,7,1,2,3,4,5,6,7

但实际发生的情况如下：1,2,3,4,5,6,6,7,1,2,4,5,6,1,5,5,4

模板内

        <Pager   @selectedIndexChange="onPagerChangedPage($event)" @loaded="onPagerLoaded($event)" for="item in profiles">
            <v-template>
              <StackLayout   class="profile-wrapper">
                <Label :text="item.first_name"/>
              </StackLayout>
            </v-template>
          </Pager>

数据

  data() 
    return 
          profiles: new ObservableArray( [  first_name: "1.hello", first_name: "2.brah", first_name: "3.krakaka",first_name: "4.Blalala",first_name: "5.Shatash",first_name: "6.Dreaum",first_name: "7.Breauhjm" ]),
      
  

方法

    onPagerChangedPage(event) 
      let profileCount = event + 1;
      if (this.profiles.length === profileCount) 
        this.getProfiles();
      
    ,
    getProfiles() 
      let newProfiles = [first_name: "1.hello",first_name: "2.brah", first_name: "3.krakaka",first_name: "4.Blalala",first_name: "5.Shatash",first_name: "6.Dreaum",first_name: "7.Breauhjm"];
      newProfiles.forEach(profile => 
        this.profiles.push(profile);
      );
    ,

编辑：尝试了一些新方法

    onLoadMoreItems(event) 
      let profileCount = this.profiles.length + 1;
      this.profiles.push(first_name: profileCount + ": random");
    ,
    onPagerChangedPage(event) 
      console.log("Current page name:" + this.profiles.getItem(event).first_name);
      let profileCount = event + 1;
      console.log(profileCount + "|" + this.profiles.length);
    ,

【参考方案1】：

这可以通过使用 ObservableArray 来解决，因为它会发出数据更改事件，所以在内部可以更好地处理它，如果您想知道它具有与常规数组大致相同数量的方法 ....import ObservableArray from 'tns-core-modules/data/observable-array'

【讨论】：

首先感谢您回答我的问题。我尝试使用 ObservableArray 但我仍然得到相同的数字序列。您还有其他解决此问题的想法吗？

您使用的是哪个版本，repo 中也有类似的示例

你能把我链接到演示吗？我刚刚浏览了演示，但我似乎找不到他也在动态删除/添加项目的演示。

Here 我们绑定到loadMoreItems 事件

我似乎仍然无法正常工作。当我通过 selectedIndex 在数组中记录一个项目时，我得到了正确的名称，但寻呼机不包含该项目。 IE: "console.log("当前页面名称:" + this.profiles.getItem(event).first_name);"正确，但页面显示错误的 first_name。