Swiper bugs when content modified from another tab

1

Hello,

I have a 2 tabs app.

In my home tab, I have an array of uncompleted todos, and I have a swiper which is present if the list is not empty (v-if="todos.length"), and with a v-for to create as many slides as tasks to do.

In my archive tab, I have a list of all the tasks, done or not, and I can check them done / undone.

The issue is the following:

  • If I complete tasks from the swipper until the swipper is empty and disappears, it works well
  • If I reload new tasks with a button in the home tab, the swiper reappears correctly and works well
  • But if I reload new tasks from the archive tab, then when I come back to the home tab, the swiper is often buggy: it does not scroll correctly (it lose the “elasticity” and do not auto realign slides), and it can even start an infinite loop of “init event”

I started a fiddle to reproduce the bug, but at the moment, I’m stuck because the tabs in my fiddle do not work!!! :sob:
https://jsfiddle.net/Lrc7nywt/1/
I really do not understand why ; the tabs work correctly on my project!

Do you have any idea how to correct the swiper issue?
If not, do you have any idea how to correct the fiddle issue so I can try to reproduce the bug of the swiper?

Thanks!

2

Still would be good to see it in Fiddle. Here is the working one https://jsfiddle.net/vyxqwdL3/

Issue was in self-closing tags <f7-view ... />, seems like it is not supported by Vue’s runtime compiler

1 Like
3

Thank you @nolimits4web, you’re a magician!

I created a fiddle to reproduce my bug: https://jsfiddle.net/eLu3t9nw/5/

When the page load, you see in your console a “swiper init” log -> normal
If you mark all the tasks as “done”, the swiper disappears -> normal
If you add a new tasks, the swiper reappears with a “swiper init” in the console -> normal

But if you go to Tab B after having done all the tasks, and you uncomplete one from Tab B, then you receive a “swiper init” event in the console (as it reappeared in Tab A), but if you go to Tab A, the swiper is not working correctly.

Edit:

By updating the swiper on tabShow event, it solves the bug:
https://jsfiddle.net/eLu3t9nw/6/

The issue is that I already tried that on my real app :frowning:
I will retry…

4

Ok, it appears that the big bug which crashed my browser was not caused by an infinite loop of swiper initialization, but to the contrary was provoking the infinite loop of swiper initialization.

It was a very tricky loop of event dependencies that happened only when some pages of my app were open at the same time… Very interesting case, but it concerned a bad usage of the f7-toggle element, and had nothing to do with swiper.

So finally, the only real “bug” with the swiper was its incorrect initialization when it is hidden, but I believe ma tabShow & swipe.update() solution is the best one?

At the moment, I’m listening to the tabShow event in my app.vue component (where the tab “home” is declared). Ideally, I would like to listen to this event directly from the home.vue page, for 2 reasons:

1/ since the swiper is in the home.vue page, I would prefer to have all the code that concerne this swiper in the same page.
2/ currently, event I have navigated deeper in the “home” tab (so it does not show the home.vue page anymore), I will “update” the swiper every time I go back to the “home” tab even if the swiper is not visible. It’s a lot of useless “update” :stuck_out_tongue:

Is there an event that would trigger directly on the home.vue page (and ideally, only when it is really visible)?

5

It is fine, yes :slight_smile:

If you want declare it in current page with double checking that page is currently visible, then it should be something like:

page.$el.parents('.tab').on('tab:show', () => {
  if (page.$el.hasClass('page-current')) { /* call swiper.update() */ }
})

Plus, in this case, you will also need to add swiper.update() for page’s beforeIn event. To update it when routing back to page.

All this can be a bit simplified by enabling observer: true, observeParents: true Swiper’s parameters. In this case it will auto update itself when some parent elements changed. This can be not optimal and trigger unnecessary updates, but you should check, maybe it will be fine

6

Thanks a lot @nolimits4web :slight_smile:

7

For bit of simplification i think i will add something like page:tabshow / pageTabShow event when page’s parent View-Tab becomes visible

1 Like