我在Nativecript-Vue应用程序中使用RadListView。在iOS上,与列表视图进行交互后的某个时候,元素开始四处移动并且布局中断。
This video shows the problem clearly
我正在使用ObservableArray作为列表视图的数据源。最初,我在LongPress上扩展了列表视图的项目,看起来所选项目上方的项目是唯一受影响的项目。我认为这可能与我更改项目的大小并影响已经绘制的项目有关。但是,如果我只是滚动并获取更多数据,它也会发生,因此没有任何意义。我尝试使用简单的标签来最大程度地减少渲染工作,但似乎变化不大。
我正在使用tns-ios v5.4.1
和nativescript-ui-listview 7.0.2
。
这是我的RadListView声明:
<RadListView ref="listView" for="item in itemList" layout="linear" loadOnDemandMode="Auto" orientation="vertical" pullToRefresh="true" swipeActions="true" :itemTemplateSelector="templateSelector" @itemSwipeProgressStarted="onSwipeStarted" @itemTap="onTap"
@loadMoreDataRequested="onLoadMoreData" @pullToRefreshInitiated="onPullToRefresh">
<v-template name="normal">
<GridLayout class="px-4 bg-white border-gray-350 border-b" columns="3*, 10*, 3*">
<AbsoluteLayout class="w-full h-full my-4" col="0">
<activix-wrapped-icon class="p-3" width="64" height="64" background-color="bg-gray-600" icon-size="text-3xl" :icon-name="getLeadTypeIcon(item.lead_type_id)" />
</AbsoluteLayout>
<FlexboxLayout verticalAlignment="center" flexDirection="column" class="mx-4" col="1">
<Label class="font-semibold" fontSize="16" :text="item.name" />
<StackLayout class="mt-1" orientation="horizontal">
<activix-icon name="car" />
<Label class="ml-2" fontSize="16" :text="item.wanted_vehicle_text" />
</StackLayout>
</FlexboxLayout>
<FlexboxLayout justifyContent="flex-end" verticalAlignment="center" col="2">
<FlexboxLayout alignItems="center" justifyContent="center" height="24" width="24" class="rounded-sm" :class="getResultColor(item.result_normalized)">
<Label class="font-bold text-white uppercase" fontSize="12" :text="getResultSymbol(item.result_normalized)" />
</FlexboxLayout>
<activix-icon class="ml-4 text-2xl" name="arrow-right" />
</FlexboxLayout>
</GridLayout>
</v-template>
</RadListView>
当滚动时,我希望布局的元素保持原样,不会移动并与其余内容重叠。我想利用RadListView的手势,例如滑动和长按,但基本行为确实存在问题。任何帮助将不胜感激!