2016-11-19 4 views
0

RadListViewのListViewStaggeredLayoutディレクティブで解決しようとしている2つの問題があります。 1)loadMode = "async"を使用してイメージのスムーズな初期読み込みをしたいと思います。 ListViewLinearLayoutではうまく動作しますが、ListViewStaggeredLayoutではまったく動作しません。 なしloadMode = "async"スタッガードレイアウトイメージは表示されますが、初期ロードはスムーズではありません。 2)リモートURLの画像をこのリストビューに表示したいのですが、直線的なレイアウトが機能しますが、2列のレイアウトがずれることはありません。 この質問は私が参考にした情報を受け取ったpreviously asked SO questionの続きですが、今ではアプリの開発に深く関わっています。ここでNativeScript/Angular2 Telerik-UIリモートURLから画像を表示するRadListViewの問題

  <!-- 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である:ここで

は私のHTMLの一部である私が唯一のiOSシミュレータとiOSデバイス上でこれをテストしている - がないAndroidのテスト。

RadListView ListViewStaggeredLayoutのパフォーマンスを向上させるにはどうすればよいですか?リモートイメージで使用することはできますか?または、これらのイメージをローカルファイルシステムに保存してそこから参照する必要がありますか?どうも。

答えて

0

nativescript 2.4 https://www.nativescript.org/blog/nativescript-2.4-announcementにアップグレードしましたか?これは、このコンポーネントのスラッシュのUIを修正します。アップグレードするには:

をアップグレードするにはまず第一に行われていることはカップルの手順です:-g nativescript @最新

  • NPMは、最新の--save または
  • @ TNS-コアモジュールをインストール

    1. NPMをインストール
    2. あなたのappディレクトリのルートに移動し、最新のtnsをアップグレードしてください。
    3. Android用

    1. TNSプラットフォーム削除アンドロイド
    2. TNSプラットフォームはiOSのアンドロイド

    を追加します(前に、必要に応じて資産をバックアップ):

    1. TNSをプラットフォームはios(前に必要に応じて資産をバックアップ)を削除します
    2. TNSプラットフォームは、次にあなたがTNS情報を入力することができ、IOS

    を追加し、すべてがあなたの入力jessiPPため

    +0

    おかげv2.4.x言うことを確認してください。私はtns-core-modules 2.4.0にアップグレードしましたが、cliとプラットフォームはまだ2.3.0です。 npmでcliバージョン2.4.0が表示されていますが、github、https://github.com/NativeScript/nativescript-cliを確認していますが、それでも最新のバージョンである2.3.0を示しています。これは私にとっては混乱しています。とにかく2.4.0へのアップグレードはすべて完了しましたが、私はまだ同じ問題があります。 ListViewStaggeredLayoutディレクティブはまだ実行されていません。あなたの時間と入力をお待ちしております。 –

    +0

    詳細情報はgithubにあります:https://github.com/telerik/nativescript-ui-feedback/issues/35 –

    関連する問題