Nativescript Vue: список данных, которые перемешиваются друг с другом

У меня есть список данных, и когда он отображается, он отображается поверх друг друга. Данные представляют собой довольно длинный список объектов, и я использую несколько полей. Я сделал пример игровой площадки, уменьшив размер списка данных и используя только поле (display_name), и это все еще происходит. Кажется, что это происходит в случайных местах списка, но я не уверен, как решить или, что более важно, почему это происходит. Я думал, что это могло быть связано с тем, что моя key не уникальна, но я убедился, что это так, и это все еще происходит. Я включил детскую площадку и добавил скриншоты. Любые идеи?

Детская площадка

Скриншоты

РЕДАКТИРОВАТЬ: (Добавление шаблона)

<RadListView
    for="(movie,index) in this.movies" 
    ref="listView"
    @loaded="onListLoaded($event)"
    @itemTap="onItemTap($event)"
    itemHeight="50"
    :key="index"
    gridSpanCount=1
>
    <v-template>
        <FlexboxLayout class="item-row" :key='`flex` + index' flexDirection="row" width="100%" height="100%" justifyContent="space-between">
            <Stacklayout orientation="horizontal">
                <Image :key='`img-flag` + index' marginTop="-22" class="flag-image" marginBottom="-22" :src="movie.image" height="100%" />
                <Label :key='`display-name` + index' :text="movie.display_name" />
            </Stacklayout>
            <Image :key='`heart-1` + index' @tap="handleToggleFavorite(movie)" width="20" :src="movie.favorite ? heartFilled : heartUnfilled" />
        </FlexboxLayout>
    </v-template>
</RadListView>

nativescript vuejs2 nativescript-vue nativescript-telerik-ui
person ccMagnut    schedule 29.11.2019    source источник
comment
Это для iOS?   -  person Manoj    schedule 29.11.2019
comment
@Manoj, в котором я не уверен. Я нацелен только на iOS и у меня нет настройки NS для эмуляции Android.   -  person ccMagnut    schedule 29.11.2019
comment
Я думаю, проблема в вашем макете, он выглядит лучше, когда я удаляю все нежелательные атрибуты / представления - play.nativescript.org/?template=play-vue&id=T4yASC&v=2. Очевидно, у вас может быть потребность в шаблоне с изображением и т. Д., Поэтому, если вы можете поделиться тем, как выглядит ваш шаблон, легче предложить лучший / более чистый макет, соответствующий вашим требованиям.   -  person Manoj    schedule 30.11.2019
comment
спасибо @Manoj. Шаблон добавлен как правка выше. Мне любопытно, почему он хорошо работает с небольшим объемом данных, но становится шатким, когда массив объектов большой. Изначально у меня было только 10 объектов в массиве, и это было нормально, но когда я использовал свой полный набор данных (около 150), то он начал странно рендерить   -  person ccMagnut    schedule 30.11.2019
comment
У меня одновременно загружается до 5к элементов, работает хорошо. Это зависит от вашего макета. Я видел ваш код макета уже в Playground, и я понятия не имел, почему вам нужно сделать отрицательный запас и все такое, поэтому я просил вас показать ожидаемые результаты, возможно, изображение, как должно выглядеть представление списка.   -  person Manoj    schedule 01.12.2019
comment
@Manoj понял, извини. Вот скриншот того, как должен выглядеть список (imgur.com/a/3ZYaOpW)   -  person ccMagnut    schedule 01.12.2019

Ответы (1)


arrow_upward
0
arrow_downward

Глядя на ваш макет, я думаю, вы можете добиться этого с помощью простого GridLayout.

<v-template>
    <GridLayout columns="auto,*,auto" class="list-group-item">
        <Image col="0" :src="movie.image"
            class="m-5 thumb img-circle">
        </Image>
        <Label col="1" :text="movie.display_name"></Label>
        <Image col="2" src="path_to_icon" class="thumb">
        </Image>
    </GridLayout>
</v-template>
person Manoj    schedule 01.12.2019
comment
да, похоже, что это работает, когда я использую такой более чистый шаблон. Спасибо! - person ccMagnut; 01.12.2019
comment
Привет, @Manoj - На самом деле похоже, что это все еще происходит при фильтрации данных и последующей очистке поля поиска, чтобы отобразить исходный список. (play.nativescript.org/?template=play-vue&id=WoYvyi&v=1). Я создал новую игровую площадку, чтобы она оставалась чистой и по существу, используя ваш шаблон и фильтруя данные, как описано в Radlistview API doc - person ccMagnut; 02.12.2019
comment
Вы внесли много изменений, особенно я не уверен, почему вы используете * в столбце для изображений, когда вы дали им фиксированную ширину, а также почему горизонтальное выравнивание, когда они уже выровнены в столбце. Более того, вы не должны использовать ListView внутри StackLayout. Чтобы узнать больше о макетах, перейдите на nslayouts.com. - person Manoj; 02.12.2019