NativeScript Vue中的重新排序列表

Posted 2023-04-13

【中文标题】NativeScript Vue中的重新排序列表

【英文标题】：ReOrder List in NativeScript Vue

【发布时间】：2019-08-02 05:27:33

【问题描述】：

我是 nativescript-vue 的新手，但我有一个应用程序可以显示从 api 获取的漂亮列表。

现在我希望能够让用户重新排序。

文档似乎陈旧，所以我将发布这个至少显示但无法重新排序的列表示例：

 <template>
 <Page class="page">
    <ActionBar title="ListView with Avatars/Thumbnails" class="action-bar" />
    <ScrollView>
        <ListView for="item in items" class="list-group" @itemTap="onItemTap">
            <v-template>
                <GridLayout class="list-group-item" rows="*" columns="auto, *">
                    <Image row="0" col="0" :src="item.src" class="thumb img-circle" />
                    <Label row="0" col="1" :text="item.text" />
                </GridLayout>
            </v-template>
        </ListView>
    </ScrollView>
</Page>

<script>
export default 
  data() 
    return 
      items: [
         text: "Bulbasaur", src: "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/1.png" ,
         text: "Charmander", src: "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/4.png" ,
         text: "Charizard", src: "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/6.png" ,
         text: "Squirtle", src: "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/7.png" ,
         text: "Wartortle", src: "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/8.png" ,
         text: "Blastoise", src: "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/9.png" ,
         text: "Caterpie", src: "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/10.png" ,
         text: "Weedle", src: "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/13.png" ,
      ]
   
  ,
  methods: 
    onItemTap: function(event) 
      console.log("You tapped: " + this.$data.items[event.index].text);
    
  ,
;
</script>

文档建议它应该很简单：Item Reorder。但我没有让这些碎片组合在一起。所以也许我们可以在这里得到一些简洁的代码？

【参考方案1】：

首先，您需要使用<RadListView> 组件而不是<ListView>。然后，您只需添加属性itemReorder="true"。像这样：

<RadListView for="item in items" class="list-group" @itemTap="onItemTap"
            itemReorder="true">

您可以在 this playground 中找到您的示例。

此外，RadListView 的 Vue 文档位于 here。这些 Vue 文档并不完整，但是一旦你“翻译”到 Vue，一切都应该可以工作。

【讨论】：

谢谢，蒂亚戈。是的，RadLustView 是我想要的，但我尝试的一切都引发了错误。操场示例给出了同样的错误：

您是否在手机中测试了 Playground 示例？它在这里工作。不是<lv:Radlistview>，而是<RadListView>。

是的，我在手机上查看了您的评论。当我点击链接时，它打开了预览并抛出了那个错误（刚刚时间戳）。

但是，当我在笔记本电脑上查看操场并用 iPhone 扫描二维码时，它工作了。我还成功地将其重新创建为一个新项目，直到我尝试按照文档中的说明进行操作。让我再摆弄一下。

我无法在干净的应用程序中成功安装和使用 RadListView。 （是我在 Windows 上吗？）。但是我在这里下载了操场，在其中构建了我的代码，并且成功了！谢谢，蒂亚戈。非常感谢您的耐心。