0

我有 2 个问题要尝试使用 RadListView 中的 ListViewStaggeredLayout 指令解决。1) 我想使用loadMode="async"以使图像的初始加载更顺畅。这适用于 ListViewLinearLayout，但不适用于 ListViewStaggeredLayout。如果没有loadMode="async"，则显示交错布局图像，但初始加载不流畅。2）我想在此列表视图中显示来自远程 url 的图像，并且线性布局再次有效，但不是 2 列的交错布局。这个问题是这个之前提出的 SO 问题的延续，在那里我收到了有用的信息，但现在我正在深入研究应用程序开发。

这是我的 HTML 的一部分：

            <!-- pictures is an ObservableArray of objects like this: 
                 {"title": "Dried Meat with Spices", "author": "Nice to Meat You", "photo": "res://listview/layouts/paleo1.jpg", "category": "paleo"} -->
            <div *ngIf="isLinearActive && useLocalPhotos">
                <RadListView [items]="pictures">
                    <template tkListItemTemplate let-item="item">
                        <GridLayout (tap)="viewImage(item)">
                            <Image class="wall-cover" [src]="item.photo" stretch="aspectFill" loadMode="async"></Image>
                        </GridLayout>
                    </template>
                    <ListViewLinearLayout tkListViewLayout scrollDirection="Vertical" itemHeight="200"></ListViewLinearLayout>
                </RadListView>
            </div>
            <div *ngIf="!isLinearActive && useLocalPhotos">
                <RadListView [items]="pictures">
                    <template tkListItemTemplate let-item="item">
                        <GridLayout (tap)="viewImage(item)">
                            <Image class="wall-cover" [src]="item.photo" stretch="aspectFill"></Image>
                        </GridLayout>
                    </template>
                    <ListViewStaggeredLayout tkListViewLayout scrollDirection="Vertical" spanCount="2"></ListViewStaggeredLayout>
                </RadListView>
            </div>

            <!-- photosURL is an ObservableArray of objects like this used to reference remote url: 
                 {"photo": "https://lh3.googleusercontent.com/za3LhYb5Nzve0BcgVCIgAwL9ETcUEpOoZVdo9KNnqi_WsowVpOXXzC-L4s9ZcGAL080GVw3YWDLboDuoR3F8"} -->
            <div *ngIf="isLinearActive && !useLocalPhotos">
                <RadListView [items]="photosURL">
                    <template tkListItemTemplate let-item="item">
                        <GridLayout (tap)="viewImage(item)">
                            <Image class="wall-cover" [src]="item.photo" stretch="aspectFill" loadMode="async"></Image>
                        </GridLayout>
                    </template>
                    <ListViewLinearLayout tkListViewLayout scrollDirection="Vertical" itemHeight="200"></ListViewLinearLayout>
                </RadListView>
            </div>
            <div *ngIf="!isLinearActive && !useLocalPhotos">
                <RadListView [items]="photosURL">
                    <template tkListItemTemplate let-item="item">
                        <GridLayout (tap)="viewImage(item)">
                            <Image class="wall-cover" [src]="item.photo" stretch="aspectFill"></Image>
                        </GridLayout>
                    </template>
                    <ListViewStaggeredLayout tkListViewLayout scrollDirection="Vertical" spanCount="2"></ListViewStaggeredLayout>
                </RadListView>
            </div>

这是完整的Github 存储库：我只在 iOS 模拟器和 iOS 设备上测试过这个 - 没有 Android 测试。

如何提高 RadListView ListViewStaggeredLayout 的性能，我可以将它与远程图像一起使用，还是需要将这些图像保存到本地文件系统并从那里引用？谢谢。

4

1 回答 1

0

您是否升级到 nativescript 2.4 https://www.nativescript.org/blog/nativescript-2.4-announcement。它修复了此组件的缓慢 ui。升级：

首先升级完成是几个步骤：

  1. npm install -g nativescript@latest
  2. npm install tns-core-modules@latest --save 或
  3. 导航到您的应用程序目录的根目录并进行最新的 tns 升级。

对于安卓：

  1. tns platform remove android（根据需要备份资产）
  2. tns平台添加android

对于 iOS：

  1. tns 平台删除 ios（根据需要备份资产）
  2. tns平台添加ios

然后您可以输入 tns info 并验证所有内容是否显示为 v2.4.x

于 2016-11-20T16:51:14.147 回答