Question

在滚动屏幕后尝试从类中获取值时，总是会出错

例如：在我的手机上，屏幕将显示8个列表项，如果我有8个以上的项目，则需要滚动。当我尝试在滚动后点击时，它显示错误。

这是我的代码

<GridLayout rows="*">
        <ListView row="0" items="{{ ListID }}" itemTap="onItemTap" class="list-group">
            <ListView.itemTemplate>
                <StackLayout class="list-group-item">
                    <Label text="{{ ID || 'Downloading...' }}" textWrap="true" class="OutletID" />
                    <Label text="{{ Name || 'Downloading...' }}" textWrap="true" class="OutletName" />
                </StackLayout>
            </ListView.itemTemplate>
        </ListView> 
    </GridLayout>

和js

function onItemTap(args) {
    const index = args.index;
    const page = args.object;
    var test = page.getElementsByClassName('OutletID')[index].text;
    console.log(test);
}
exports.onItemTap = onItemTap;

Answer 1

我以前没有用过本机脚本，所以请带一点盐，但是...

通常，当您使用基于组件的库（例如NativeScript）时，您不想通过某个第三方库来获取对该组件中项目的引用。使用dom来获取那些引用实际上就是这样。您假设这些元素仍然在dom中。他们为什么要向dom渲染元素，然后将其隐藏？我的猜测是他们在幕后正在做的事情是在dom向上滚动并离开页面时从dom中删除该元素，这就是您查找失败的原因。您获得的索引> 7，该页面仅显示8，因此当您要求页面中所有这些元素时，您会得到一个大小为8的列表，然后尝试获取第9个元素（索引为8）。

因此，我认为解决您的问题的方法是停止尝试“遍历”组件模型，而不再使用NativeScript框架提供给您的方法和值。

在onItemTap（）中，您应该能够获得对直接点击的项目的引用。所以我认为您应该看起来像这样。

function onItemTap(args) {
    console.log(args.item.text);
}

itemTap当点击中的项目时触发。要访问被窃听的项目，请使用event.item。

我找不到“ itemTap”类的任何定义，因此我对它具有的方法或属性视而不见，但是在这里找到了对其的引用。如果您想从dom本身上获取一个值（例如text属性），则可能需要执行类似args.item.rawElement.text的操作，但这特定于API。

https://nativescript-vue.org/en/docs/elements/components/list-view/#events

Answer 2

getElementsByClassName不是内置方法，只有安装了nativescript-dom插件后，该方法才可用。

ListView与其他组件的操作方式大不相同，它在向下滚动/向上滚动时回收模板以提高性能，因此在此处使用getElementsByClassName并不是一个明智的主意。

function onItemTap(args) {
    const index = args.index; // The index that was tapped
    const view  = args.view; // The item instance that was tapped
    const data = view.bindingContext // will return enter data item
}

来源：https://docs.nativescript.org/ui/ns-ui-widgets/list-view

Answer 3

我这样编辑我的js：

function onItemTap(args) {
    const index = args.index;
    const val = vm.ListID[index].Name;
    console.log(val);
}
exports.onItemTap = onItemTap;

注意：vm是pagebindingContext，名称（'OutletID'）是我的数组ListID（{ID：ID，Name：Name}）

Nativescript getElementsByClassName（）错误

3 个答案: