在ionic2中使用图像和文本加载延迟列表

Posted 2023-03-13

【中文标题】在ionic2中使用图像和文本加载延迟列表

【英文标题】：Lazy list loading with image and text in ionic2

【发布时间】：2018-04-26 12:27:46

【问题描述】：

我想用图像和文本创建延迟加载列表。对于列表的每一行，图像可以作为单独的 http 请求从服务器下载。请让我知道图像下载是否需要任何缓存。请让我知道 ionic2 中延迟加载列表的任何示例。

谢谢，

【参考方案1】：

这是列表的示例代码

<ion-list no-lines [virtualScroll]="partnerArray">
<ion-item-sliding *virtualItem="let item; let i=index">
  <ion-item (click)="view(i)">
    <ion-avatar item-start>
      <ion-img class="image" src="data:image/*;base64,item.imageUrl" style="height: 50px; width: 50px"></ion-img>
    </ion-avatar>
    <h2>item.name</h2>
    <p>item.email</p>
  </ion-item>
  <ion-item-options>
    <button ion-button color="danger" (click)="delete(i)">
      Delete
    </button>
  </ion-item-options>
</ion-item-sliding>

在.ts 文件中

private partnerArray: Array<
id: number
imageUrl: string,
name: string,
email: string
> = []

 this.odooRpc.searchRead(this.partner,
 this.domain, this.fields, this.limit, this.offset,
 this.sort).then((partner: any) => 
   let json = JSON.parse(partners._body)["result"].records;
   for (let i in json) 
   this.partnerArray.push(
   id: json[i].id,
   imageUrl: json[i].image_small == false ? "N/A":json[i].image_small ,
   name: json[i].name == false ? "N/A" : json[i].name,
   email: json[i].email == false ? "N/A" : json[i].email
 )


)

这是 odoo 服务器的代码。我已经从 odoo 服务器获取了一条记录。 希望对你有帮助

【讨论】：

我认为 json[i].image_small 是 base64 格式的字符串。这个base64格式的图片需要和http URL分开下载。图像将被下载，然后转换为 base64 格式。是否需要任何缓存，例如将每个图像存储在文件中？

如果需要离线支持，当然需要保存到文件中。否则base64字符串会直接显示到<ion-img>标签中。

我已将项目添加到数组中，如下所示：this.mainArray.push(PNumber: responseData[i].PNumber, ImagePhoto: this.download(i), Id:responseData[i]. ID，）;其中，下载方法将从服务器获取图像并转换为base64格式，然后将结果返回给mainArray.ImagePhoto，如下所示：download(index) this.getPhotoService.getImagePhoto(ID,(data) => this.mainArray[index ].ImagePhoto=data;return data; , (errData) => return ""; );让我知道问题所在。

它会下载图像并显示列表中的每一行。它可以在下载中为每一行映射索引“i”吗？我得到 ImagePhoto 的“未定义”值，但它不显示。这是因为静止图像处于下载状态，尚未完成下载。一次，下载完成，然后列表不会用图像数据刷新。

你有 JSON 数据或 base64 字符串图像中的 url 吗？