离子底固定内容

Question

我正在尝试实现一个简单的列表页面，并且在屏幕底部显示了一个固定的按钮，该按钮永远不会与列表一起滚动，但是使用我的代码按钮与列表一起滚动，我如何解决此问题，有人可以帮助我请

html：

Private Sub btnsave_Click(sender As Object, e As EventArgs) Handles btnsimpan.Click

    'codes to save the pdf
    Dim filesize As UInt32
    Dim rawData() As Byte = IO.File.ReadAllBytes(strFilename)
    Dim fs As FileStream

    Try
        fs = New FileStream("'" & strFilename & "'", FileMode.Open, FileAccess.Read)
        filesize = fs.Length

        rawData = New Byte(filesize) {}
        fs.Read(rawData, 0, filesize)
        fs.Close()

        conn.Open()
        cmd = New MySql.Data.MySqlClient.MySqlCommand("INSERT INTO simpanambilpdf VALUES (NULL, @FileName, @FileSize, @File)", conn)
        cmd.Parameters.AddWithValue("@FileName", strFileName)
        cmd.Parameters.AddWithValue("@FileSize", filesize)
        cmd.Parameters.AddWithValue("@File", rawData)
        cmd.ExecuteNonQuery()
        MessageBox.Show("Congratulations PDF file is saved!", "HORE", MessageBoxButtons.OK, MessageBoxIcon.Asterisk)
        conn.Close()
    Catch ex As Exception
        MsgBox(ex.Message)
    End Try
End Sub 

css：

<ion-content padding>

    <div *ngIf="!events || events.length === 0">
        <p>No messages</p>
    </div>

  <div *ngIf="events && events?.length > 0">
    <ion-item-group *ngFor="let group of events | groupByCategory: 'date'">
      <ion-item-divider color="light">
        {{ group.key }}
      </ion-item-divider>
      <ion-item *ngFor="let event of group.list">{{ event.title }}</ion-item>
    </ion-item-group>
  </div>
  <div class="bottomright" (click)="add()">Add</div>
</ion-content>

Answer 1

您可以为此使用ion-footer

<ion-content></ion-content>

<ion-footer>
  <ion-toolbar>
    <ion-title>Footer</ion-title>
  </ion-toolbar>
</ion-footer>

Answer 2

在html代码中，

<button ion-button class="custom-button" (click)="add()">Add</button>  

在scss代码中，

.custom-button{
  position:fixed;
  right:0;
  bottom:0;
}