Question

我正在基于Angular创建离子应用程序（第一次）我用锚创建了一张卡片，该卡片将我发送到同一页面中的其他卡片。

 <ion-card>
          <ion-item  class="activated">
            <ion-icon name="camera" slot="start"></ion-icon>
            <ion-label  routerLink= "#visit">Pics</ion-label>
          </ion-item>
 </ion-card>

此锚应将我发送到具有相同id =“ visit”的卡，但该卡无法正常工作。

<ion-card id="visit">
      <ion-card-header>
          <ion-card-title > 
          <ion-icon style="padding-top:5px" name="camera" ></ion-icon>
            Pictures
          </ion-card-title>
        </ion-card-header>
  </ion-card>

我检查了google，但得到的所有结果都是关于其他问题的。

Answer 1

routerLink属性是Angular如何过渡到页面，如何连接到自己页面中的锚点，使用老式的<a href=#visit>

  <ion-card>
    <ion-item  class="activated">
      <ion-icon name="camera" slot="start"></ion-icon>
        <a href="#visit">
          <ion-label>Pics</ion-label>
        </a>
      </ion-icon>
    </ion-item>
  </ion-card>

另一个使滚动平滑的解决方案，您可以在<ion-label (click)="scroll()">Pics</ion-label>上单击并调用

 scroll() {
   var anchor = document.getElementById("visit");
   anchor.scrollIntoView({block: "end", behavior: "smooth"});
 }

同一页面中的锚点

1 个答案: