【问题标题】:RadListView: Unknown custom element: <ReorderHandle>RadListView:未知的自定义元素:<ReorderHandle>
【发布时间】:2019-11-20 18:38:17
【问题描述】:

我在 reorderMode="Drag" 中使用 ReorderHandle 时遇到错误,RadListView 组件中的 nativescript-ui-listview/vue like

[Vue warn]: Unknown custom element: &lt;ReorderHandle&gt; - did you register the component correctly? For recursive components, make sure to provide the "name" option.

如何根据这个doc linkNativescript-vue使用ReorderHandle?

对此功能的任何帮助将不胜感激。

这是我的代码

ma​​in.js

import Vue from 'nativescript-vue'
import RadListView from 'nativescript-ui-listview/vue';
Vue.use(RadListView);

我的 Vue 组件

<RadListView ref="listView" for="(manager, index) in managers" :itemReorder="true" reorderMode="Drag">
    <v-template>
        <Label>{{ manager.name }}</Label>
        <ReorderHandle col="1" verticalAlignment="center">
            <Image android:src="res://reorder_icon" ios:src="res://reorder-icon" stretch="none" verticalAlignment="stretch" margin="16" />
        </ReorderHandle>
    </v-template>
</RadListView>

【问题讨论】:

    标签: nativescript-vue radlistview nativescript-ui-listview


    【解决方案1】:

    其中有一个Vue example

    就像你在代码中看到的一样,你不需要添加&lt;ReorderHandle&gt;

    例子:

    <template>
      <RadListView ref="listView"
                   for="item in items"
                   pullToRefresh="true"
                   itemReorder="true"
                   swipeActions="true"
                   @itemTap="onItemTap"
                   @pullToRefreshInitiated="onPullToRefreshInitiated"
                   @itemReordered="onItemReordered"
                   @itemSwipeProgressStarted="onSwipeStarted">
        <v-template>
          <GridLayout columns="50, *" rows="*" class="item">
            <Image :src="item.image" col="0" class="thumbnail" />
            <StackLayout col="1">
              <label :text="item.name" class="h2" col="1"/>
              <label :text="item.description" class="p" col="1"/>
            </StackLayout>
          </GridLayout>
        </v-template>
    
        <v-template name="itemswipe">
          <GridLayout columns="auto, *, auto" backgroundColor="White">
            <StackLayout id="mark-view" col="0" class="swipe-item left"
                         orientation="horizontal" @tap="onLeftSwipeClick">
              <Label text="mark" verticalAlignment="center" horizontalAlignment="center"/>
            </StackLayout>
            <StackLayout id="delete-view" col="2" class="swipe-item right"
                         orientation="horizontal" @tap="onRightSwipeClick">
              <Label text="delete" verticalAlignment="center" horizontalAlignment="center" />
            </StackLayout>
          </GridLayout>
        </v-template>
      </RadListView>
    </template>
    

    更多详情请见here

    【讨论】:

    • 感谢您的回复。我需要实现可以在 reorderMode="Drag" 中为重新排序功能定义句柄的功能,因为目前,我可以从整个项目中拖动,而不仅仅是拖动句柄。有没有办法实现这样的功能?实际上,拖动模式也会在垂直滚动中产生问题。所以,现在,我添加了 HoldAndDrag 模式。
    • 我不明白你的意思:because currently, I can drag from the whole item instead of just drag handle。可以举个例子吗?
    • 拖动或重新排序句柄意味着我可以定义只有我可以拖动项目的某些部分或特定区域。在我发布的有问题的文档链接中,您可以看到一个图像,其中显示了 3 个条形图标,它是用于重新排序项目的拖动句柄
    • 我现在明白你的意思了。我发布的答案是我知道的唯一可以使用 nativescript-vue 的事情。
    • 我已经完成了简单的重新订购。无论如何感谢您的支持。
    猜你喜欢
    • 2019-11-22
    • 2020-01-02
    • 2020-07-11
    • 2020-04-05
    • 2020-09-16
    • 2020-09-01
    • 2020-02-03
    • 2018-11-06
    • 2020-12-10
    相关资源
    最近更新 更多