Onload a sheet modal in framework7 app

I want to onload modal when a template page is opened, to show a sheet modal how do i acheive this in framework7

<template>
       <div class="page" @onload="loadModal()">
   <!-- RIDER INTRANSIT MODAL MINIMIZED -->
   <div class="sheet-modal my-sheet-swipe-to-step" style="height:auto; --f7-sheet-bg-color: #fff;">
      <div class="sheet-modal-inner">
         <div class="sheet-modal-swipe-step">
            <div class="display-flex padding justify-content-space-between align-items-center">
               <div style="font-size: 18px"><b>Total:</b></div>
               <div style="font-size: 22px"><b>$500</b></div>
            </div>
            <div class="padding-horizontal padding-bottom">
               <a class="button button-large button-fill">Make Payment</a>
               <div class="margin-top text-align-center">Swipe up for more details</div>
            </div>
         </div>
         <div class="block-title block-title-medium margin-top">Your order:</div>
         <div class="list no-hairlines">
            <ul>
               <li class="item-content">
                  <div class="item-inner">
                     <div class="item-title">Item 1</div>
                     <div class="item-after text-color-black"><b>$200</b></div>
                  </div>
               </li>
               <li class="item-content">
                  <div class="item-inner">
                     <div class="item-title">Item 2</div>
                     <div class="item-after text-color-black"><b>$180</b></div>
                  </div>
               </li>
               <li class="item-content">
                  <div class="item-inner">
                     <div class="item-title">Delivery</div>
                     <div class="item-after text-color-black"><b>$120</b></div>
                  </div>
               </li>
            </ul>
         </div>
      </div>
   </div>
   <!-- /END RIDER INTRANSIT MODAL MINIMIZED -->
   </div>
</template>

   <script>
   return {
       mounted() {
       },
       on: {
           pageInit: function (e, page) {
   
           }
       },
       methods: {
           loadModal: function () {
               app.sheet.create({
   el: '.my-sheet-swipe-to-step',
   swipeToClose: true,
   swipeToStep: true,
   backdrop: true,
   });
           },
       }
   }
   
</script>

Based on this documentation [https://framework7.io/docs/sheet-modal.html](Sheet modal)

There is no onload page event https://framework7.io/docs/page.html#page-events, you probably need @page:afterin

This works, also i did this

setTimeout(() => {

                

                sheetModal = app.sheet.create({

                    el: '.my-sheet-swipe-to-step',

                    swipeToClose: true,

                    swipeToStep: true,

                    backdrop: true,

                });

                sheetModal.open();

                

            }, 400);

this kind of code is wrong, bcs you are depending on your 400ms timer to create a sheet. If you have a heavy page then 400ms wont do it and you will have to wait 800ms and if you add more info 1200ms, etc. The best way is doing what nolimits4web suggest and use the events that f7 provides. this way you prefent future headaches.

just a suggestion, but i see in lot of answers that the solution is a timeout, when there is a much better approach

1 Like