nova-live/projects/live-app/src/modules/user/friends/friends.component.html

<nav title="粉丝和关注"></nav>
<ion-content class="content">
  <ion-segment
    [scrollable]="true"
    (ionChange)="segmentChanged($event)"
    layout="icon-bottom"
    value="from"
    mode="md"
  >
    <ion-segment-button value="from" class="tabs" content-id="from">
      <ion-label>关注</ion-label>
    </ion-segment-button>
    <ion-segment-button value="to" class="tabs" content-id="to">
      <ion-label>粉丝</ion-label>
    </ion-segment-button>
  </ion-segment>

  <div class="list">
    @for (item of list; track $index) { @if (active === 'from') {
    <div class="li" (click)="toUrl(item.get('toUser')?.id)">
      <div class="li-left">
        <img [src]="item.get('toUser')?.get('avatar')" class="avatar" />
      </div>
      <div class="li-right">
        <div class="li-right-user">
          <div class="user-name">
            {{
              item.get("toUser")?.get("nickname") ||
                item.get("toUser")?.get("name")
            }}
          </div>
          <div class="time">
            {{ item.createdAt | showDate }}
          </div>
        </div>
        <ion-icon name="chevron-forward"></ion-icon>
      </div>
    </div>
    }@else {
    <div class="li" (click)="toUrl(item.get('fromUser')?.id)">
      <div class="li-left">
        <img [src]="item.get('fromUser')?.get('avatar')" class="avatar" />
      </div>
      <div class="li-right">
        <div class="li-right-user">
          <div class="user-name">
            {{
              item.get("fromUser")?.get("nickname") ||
                item.get("fromUser")?.get("name")
            }}
          </div>
          <div class="time">
            {{ item.createdAt | showDate }}
          </div>
        </div>
        <ion-icon name="chevron-forward"></ion-icon>
      </div>
    </div>
    } }
  </div>
  @if (disbable) {
  <ion-infinite-scroll (ionInfinite)="onIonInfinite($event)">
    <ion-infinite-scroll-content></ion-infinite-scroll-content>
  </ion-infinite-scroll>
  }
</ion-content>