滚动时Nativescript-vue RadListView内容移动,从而中断了iOS上的布局

时间:2019-08-12 19:01:15

标签: nativescript nativescript-vue radlistview

我在Nativecript-Vue应用程序中使用RadListView。在iOS上,与列表视图进行交互后的某个时候,元素开始四处移动并且布局中断。

This video shows the problem clearly

我正在使用ObservableArray作为列表​​视图的数据源。最初,我在LongPress上扩展了列表视图的项目,看起来所选项目上方的项目是唯一受影响的项目。我认为这可能与我更改项目的大小并影响已经绘制的项目有关。但是,如果我只是滚动并获取更多数据,它也会发生,因此没有任何意义。我尝试使用简单的标签来最大程度地减少渲染工作,但似乎变化不大。 我正在使用tns-ios v5.4.1nativescript-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的手势,例如滑动和长按,但基本行为确实存在问题。任何帮助将不胜感激!

0 个答案:

没有答案