首页 文章

NativeScript / Angular2 Telerik-UI RadListView问题显示来自远程URL的图像

提问于
浏览
0

我有两个问题,我试图用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 回答

  • 0

    您是否升级到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

相关问题