Current View always undefined

1

I am using a tabbed view with swiper to make them swipeable, but whenever i try to get the current view it doesn’t work and i get undefined:

this is how the views variable looks like in console:

1. 0: t {eventsParents: Array(1), eventsListeners: {…}, params: {…}, routes: Array(10), app: t, …}
2. 1: t {eventsParents: Array(1), eventsListeners: {…}, params: {…}, routes: Array(10), app: t, …}
3. 2: t {eventsParents: Array(1), eventsListeners: {…}, params: {…}, routes: Array(10), app: t, …}
4. create: ƒ (t,a)
5. current: undefined
6. get: ƒ (e)
7. main: t {eventsParents: Array(1), eventsListeners: {…}, params: {…}, routes: Array(10), app: t, …}
8. length: 3
9. get current: ƒ ()
10. __proto__: Array(0)
2

There is something missing in your code/layout, you can see how it is calculated here https://github.com/framework7io/framework7/blob/master/src/core/components/view/view.js#L5 to see what can be missing

3

apearently the .tab-active class doesn’t get placed on the current active tab this is the layout:

    <div class="views tabs safe-areas tabs-swipeable-wrap swiper-container" key="views">
        <div class="swiper-wrapper tabs">
            <div id="view-recs" class="view view-recs tab swiper-slide" data-url="/recs/"></div>
            <div id="view-main" class="view view-main tab tab-active swiper-slide" data-url="/"></div>
            <div id="view-settings" class="view view-settings tab swiper-slide" data-url="/settings/"></div>
        </div>
    </div>

and this is the swiper:

              app.viewsSwiper = app.swiper.create('.views', {
                    initialSlide: 1,
                    nested: true,
                    resistanceRatio: 0,
                    preventInteractionOnTransition: true,
                    noSwiping: true,
                    noSwipingClass: 'views-no-swiping',
                    freeModeMomentumBounce: false,
                    on: {
                        init: function () {
                            const swiper = this;
                            const id = swiper.slides.eq(swiper.activeIndex).attr('id');
                            if(!self.viewRecs) {
                                self.viewRecs = app.views.create('.view-recs', {
                                    url: '/recs/'
                                })
                            }
                            if(!self.viewMain) {
                                self.viewMain = app.views.create('.view-main', {
                                    url: '/',
                                    main: true,
                                    options: {
                                         reloadCurrent: true,
                                    }
                                })
                            }
                            if(!self.viewSettings) {
                                self.viewSettings = app.views.create('.view-settings', {
                                    url: '/settings/'
                                })
                            }
                            app.tab.show('#'+id);
                        },
                        slideChange() {
                            const swiper = this;
                            const id = swiper.slides.eq(swiper.activeIndex).attr('id');
                            app.tab.show('#'+id);
                        }
                    }
                });
                app.on('tabShow', (tabEl) => {
                    //console.log("show")
                    if (self.$(tabEl).hasClass('view')) {
                        app.viewsSwiper.slideTo(self.$(tabEl).index());
                        //console.log(self.$(tabEl).trigger('page:afterin'))
                    }
                });
4

I am not using a tabbar
even if i use

                        self.$(tabEl).addClass('tab-active')

it doesn’t catch the current view

5

my only solution for this problem was to change the function getCurrentView

and replace
var $viewEl = $viewsEl.children('.view');
with
var $viewEl = $viewsEl.find('.view');

and
$viewEl = $viewsEl.children('.view.tab-active');
with
$viewEl = $viewsEl.find('.view.tab-active');

the only downside, there shouldn’t be any views deeper the dom tree i guess

6

Pushed fix for this case to core