我有两个问题,我试图用RadListView中的ListViewStaggeredLayout指令解决 . 1)我想使用 loadMode="async" 以使图像的初始加载更平滑 . 这与ListViewLinearLayout很好地配合,但与ListViewStaggeredLayout完全不兼容 . 没有 loadMode="async" 交错布局图像显示,但初始加载不顺畅 . 2)我想在此列表视图中显示来自远程URL的图像,并且线性布局再次工作,但不是具有2列的交错布局 . 这个问题是previously asked SO question的延续,我收到了有用的信息,但现在我正在深入了解应用程序开发 .
这是我的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 repo:我只在iOS模拟器和iOS设备上测试了这个 - 没有Android测试 .
如何提高RadListView ListViewStaggeredLayout的性能,我可以将它与远程图像一起使用,还是需要将这些图像保存到本地文件系统并从那里引用?谢谢 .
1 回答
您是否升级到nativescript 2.4 https://www.nativescript.org/blog/nativescript-2.4-announcement . 它修复了这个组件的瑕疵ui . 升级:
首先升级完成是几个步骤:
npm install -g nativescript @ latest
npm install tns-core-modules @ latest --save或
导航到您的应用程序目录的根目录并执行最新升级 .
对于Android:
tns平台删除android(根据需要备份资产)
tns平台添加android
对于iOS:
tns平台删除ios(根据需要备份资产)
tns平台添加ios
然后你可以输入tns info并验证所有内容都是v2.4.x