CODEWITHSUNDEEP
nativescriptswipegesturetabviewnativescript-vue
JoJo
JoJo

Reputation: 1

How to enable swipe gesture when tabView is positioned bottom

I am using nativescript-vue and I wanted to play around with tab-view. The problem is, when I set my tabs to be positioned at the bottom of the screen, the swipe gesture no longer works and is somewhat disabled. I want to enable swipe gesture.

Because I'm new to native-script or android, I'm not really sure how to enable it.

<Page actionBarHidden="true">

    <TabView androidTabsPosition="bottom">

        <TabViewItem title="Tab 1">
            <GridLayout columns="*" rows="*">
                <Label class="message" :text="msg" col="0" row="0"/>
            </GridLayout>
        </TabViewItem>

        <TabViewItem title="Tab 2">
            <GridLayout columns="*" rows="*">
                <Label class="message" text="Tab 2 Content"/>
            </GridLayout>
        </TabViewItem>

        <TabViewItem title="Tab 3">
            <GridLayout columns="*" rows="*">
                <Label class="message" text="Tab 3 Content"/>
            </GridLayout>

        </TabViewItem>

    </TabView>

</Page>

The above script creates tabview with 3 tabs, but the problem is, now you can't swipe between the tabs. If I set androidTabsPosition="top", then swipe gesture works.

Can someone please enlighten me how to enable swipe gestures.

Here's the documentary for tabView in nativescript-vue

Upvotes: 0

Views: 686

Answers (1)

Manoj
Manoj

Reputation: 21908

Enable swipe on the view pager from the TabView's loaded event. I didn't notice any side effect with this behaviour, incase if you hit anything let me know.

Template

...
<TabView androidTabsPosition="bottom" @loaded="onTabViewLoaded">
...

JS

       onTabViewLoaded: function(args) {
            if (args.object.android) {
                args.object.android.viewPager.setSwipePageEnabled(true);
            }
        }

Upvotes: 2

Related Questions