NativeScript Vue 中的重新排序列表

Question

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

现在我希望能够让用户重新订购它。

文档似乎过时了，所以我只 post 这个至少显示但不能重新排序的列表示例：

 <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。但我没有把这些碎片拼在一起。那么也许我们可以在这里得到一些简洁的代码？

Answer 1

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

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

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

此外，RadListView 的 Vue 文档位于 here。这些 Vue 文档并不完整，但是一旦你 "translate" 到 Vue.

一切都应该有效

NativeScript Vue 中的重新排序列表

ReOrder List in NativeScript Vue

nativescript-vue