search

surmon-china / vue-awesome-swiper

🏆 Swiper component for @vuejs
https://github.surmon.me/vue-awesome-swiper
MIT License
12.81k stars 1.97k forks source link

Massive performance issues with 50+ slides caused by any update to dom #692

Open miller-kevin opened 4 years ago

miller-kevin commented 4 years ago

I have a dialog that's fairly complex but the simple version is that I show a fullscreen thumbnail for a file, when clicking a button, it shrinks the file down to fill just the top half of the screen, and a carousel with all the file's slides moves up to fill the bottom half.

The problem is that no matter what update happens in the dom via vue (not when manually manipulating to add/remove the class via chrome dev tools), whether or not it affects swiper, 250 events fire (likely scales with the number of slides in the carousel) and I don't understand why.

It causes a freeze. Slide data is not manipulated, the only thing that changes is when a vue variable is true, a class is added, which adjusts the translateY value on the carousel.

image

image

Has anyone experienced this?

miller-kevin commented 4 years ago

:auto-update="false" fixed it.

https://github.com/surmon-china/vue-awesome-swiper/issues/424

SlivaNilow commented 4 years ago

thx this also helped with my problem when I changed any data in the root app the slider paused and the position/translate was reset

MrToxy commented 4 years ago

Facing the exact same issue but with far less slides, only 3 or 4. Updating any property under data will break the slider even if the property has nothing to do with it. what does auto-update do exactly and is it safe to disable it @whoisme555

miller-kevin commented 4 years ago

Facing the exact same issue but with far less slides, only 3 or 4. Updating any property under data will break the slider even if the property has nothing to do with it. what does auto-update do exactly and is it safe to disable it @whoisme555

Documentation says "Auto update swiper when vue component updated"

Seemed to work the same when set to false, but I don't know. Had a laundry list of issues with this carousel so I ended up making my own and deleting this.