[SOLVED] Swipe Step does not open partially

Questions
1

Hi,

I am having trouble trying to get the the Swipe to Step component to work. The sheet opens but the swipe to step functionality does not work and all of the content is shown immediately.

I have added the following code to the index.html page immediately after
<div class="page-content">

<p><a class="button button-fill sheet-open" href="#" data-sheet=".my-sheet-swipe-to-step">Swipe To Step</a></p>

<div class="sheet-modal my-sheet-swipe-to-step" style="height:auto; --f7-sheet-bg-color: #fff;">
  <div class="sheet-modal-inner">
    <div class="swipe-handler"></div>
    <!-- initial sheet modal content -->
    <div class="sheet-modal-swipe-step">
      <div> inital content</div>
      <div>Swipe up for more details</div>
    </div>
    <!-- rest of the content that will be opened with extra swipe -->
    <div>the rest goes here<br/>the rest goes here<br/>the rest goes here<br/>the rest goes here<br/></div>
  </div>
</div>

To “app.js” I added the following code to the bottom of the file:

app.sheet.create({
  el: '.my-sheet-swipe-to-step',
  swipeToClose: true,
  swipeToStep: true,
  backdrop: true,
});

Thanks very much for your help.

2

This code:

Needs to be added when the page with such sheet is loaded (when this sheet is in DOM). Better place for this is to call this code in pageInit event on page with Sheet

3

HI Nolimits4web,

I tried this by adding the following code to:

  on: {
    // each object key means same name event handler
    pageInit: function (page) {
      // do something on page init
      console.log('load on init');
      // do something on page init
      app.sheet.create({
      el: '.my-sheet-swipe-to-step',
      swipeToClose: true,
      swipeToStep: true,
      backdrop: true,
      });
    },
  },

However it still does not work (despite the console log showing confirmation of page initialisation)… Perhaps the issue is that I am trying to get this to work on the initial page (index.html).

Any further thoughts greatly appreciated.

4

Are you sure you are on latest F7 version?

5

Thank you very much nolimits4web!

My assumption was that the official templates would be using the latest version of the framework. I was using the Split View template which seemed to be operating on v4.0

It never occurred to me to double check the version number.

Thanks once again!

6

I use Vue and webpack but Swipe Step does not open partially too, anyone can help?

7

solved too with updating framework7 and framework7-vue to 4.5.0 thanks all…