[v2] How to generate swipeable tabs dynamically?

Questions
1

Hello, everyone.

I have a page with tabs, which user opens periodically in my app. I want these tabs to be swipeable. Also, I want to have different number of these tabs from time to time (depends on data loaded).

If whole page content is already in DOM before my page is inited, everything works OK (obviously):

        <div class="page-content" id="pageContent">

            <div class="tabs-swipeable-wrap">

                <div class="segmented">
                    <a href="#tab1" class="button tab-link-active tab-link">TAB1</a>
                    <a href="#tab2" class="button tab-link">TAB2</a>
                    <a href="#tab3" class="button tab-link">TAB3</a>
                </div>

                <!-- Tabs, tabs wrapper -->
                <div class="tabs">
                    <!-- Tab 1, active by default -->
                    <div id="tab1" class="tab tab-active">
                        ... Tab 1 content ...
                    </div>
                    <!-- Tab 2 -->
                    <div id="tab2" class="tab">
                        ... Tab 2 content ...
                    </div>
                    <!-- Tab 3 -->
                    <div id="tab3" class="tab">
                        ... Tab 3 content ...
                    </div>
                </div>
            </div>

        </div>

But when I try to generate whole page content dynamically (i.e., everything inside <div class="page-content">...</div> after my data is loaded), all tabs are displayed in one long list, one by one. It happens because page is already inited by the time my data is loaded.

In F7 v1 I have found a workaround for this: app.initPageSwiper('#pageId') did the magic, and swiper was fully functional. But migrating to v2 I understand that same function initSwipers(swiperEl) was hidden.

Is there any way to initialize such dynamically generated swipeable tabs?

2

The idea is you basically need to init swiper on such tabs, and add additional required Swiper classes, you can check what is done here and do the same in your code when your HTML is ready:

3

Thanks for fast answer, Vladimir! Thought about it at first, but decided to ask nevertheless.

Possibly, this function should be available outsite? I don’t remember exactly about iOS, but in Android such swipeable tabs are standard SDK functionality available out-of-the-box.

4

You can just use Swiper for this, its API is available