我想在 ionic 下創建一個彈出視窗，該彈出視窗出現在底部，當您單擊它上方時消失，就像在 Youtube 應用程式上單擊中間按鈕時一樣。
我怎樣才能做到這一點 ？
此示例影像也顯示良好。
uj5u.com熱心網友回復：
該組件通過以下方式存在 Ionic 實作ActionSheetController：
constructor(private actionSheetController: ActionSheetController) { }
async open() {
(await this.actionSheetController.create({
buttons: [
{text: 'item 1'},
{text: 'item 2'},
{text: 'item 3', handler: () => console.log('clicked')},
{text: 'cancel', role: 'cancel'},
]
})).present();
}
uj5u.com熱心網友回復：
這是一個可能的解決方案：
// ------------------- TS CODE -----------------------------
constructor(public modalController: ModalController) {}
openBottomPopUp() {
this.modalController
.create(
{
component: PopUpPageToDisplayPage,
backdropDismiss: true,
swipeToClose: true,
cssClass: 'bottom-pop-up'
})
.then(modal => {
modal.present().then();
});
}
// ------------------- SCSS CODE -----------------------------
.bottom-modal {
.modal-wrapper {
width: 100%;
height: 35%;
position: absolute;
bottom: 0;
border-radius: 10% 10% 0 0;
}
.modal-shadow {
position: absolute;
height: 35%;
bottom: 0;
}
}
在modal-shadow也必須這么改的彈出消失時點擊的外面。高度可以根據您的需要定義。
PopUpPageToDisplayPage 是您要在彈出視窗中顯示的頁面。
您可以使用 ion-modal ( https://ionicframework.com/docs/api/modal ) 的所有引數
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/369589.html