навигация по дна и навигация c навигация - PullRequest
Новая
       6

навигация по дна и навигация c навигация

0 голосов
/ 27 февраля 2020

У меня есть две страницы 0 и 1. На странице 0 есть кнопка, которая открывает модал, которая имеет кнопку, которая должна закрыть модал и перейти на вторую страницу. Я пытался добиться этого, связывая :selectedindex, но это не работает. Какие-нибудь мысли? Вот детская площадка

Если вы нажмете 1, затем нажмите кнопку go to 0, затем show modal, затем go to 1, и вы перейдете на страницу 1.

Если вы нажмете 0, затем show modal, а затем go to 1, вы попадете на страницу 0.

PS

Если я зафиксирую свою мутацию с задержкой, проблема решена, но правда в том, что это будет плохой UX, и пользователь сначала увидит страницу 0, а затем быстро переключится на страницу 1, но я бы хотел, чтобы пользователь сразу видел страницу 1 только после закрытия модального окна. 

setTimeout(() => {
    this.$store.commit(
        "SET_ACTIVE_PAGE_INDEX", 1);
}, 10);

В случае исчезновения детской площадки, вот коды:

store. js

import Vue from 'nativescript-vue'
import Vuex from './vuex';

Vue.use(Vuex);

export default new Vuex.Store({
    state: { activePageIndex: 2 },
    mutations: {
        SET_ACTIVE_PAGE_INDEX(state, v) {
            state.activePageIndex = v;
        },
    },
});

app . js

import Vue from 'nativescript-vue'
import App from './components/App'
import store from './store'

Vue.prototype.$store = store;
new Vue({
  store,
  render: h => h('frame', [h(App)])
}).$start()

компоненты / приложение. vue

<template>
    <Page actionBarHidden="true">
        <BottomNavigation :selectedIndex="$store.state.activePageIndex">
            <TabStrip>
                <TabStripItem>
                    <label text="0" />
                </TabStripItem>
                <TabStripItem>
                    <label text="1" />
                </TabStripItem>
            </TabStrip>

            <TabContentItem>
                <button text="show modal" @tap="showModal" />
            </TabContentItem>
            <TabContentItem>
                <button text="go to 0"
                    @tap="$store.commit('SET_ACTIVE_PAGE_INDEX', 0)" />
            </TabContentItem>
        </BottomNavigation>
    </Page>
</template>

<script>
    import Modal from "./Modal";

    export default {
        methods: {
            showModal() {
                this.$showModal(Modal, {
                    fullscreen: true,
                    transition: {
                        name: "slideTop"
                    },
                    clearHistory: true
                }).then(is_to_1 => {
                    setTimeout(() => {
                        this.$store.commit(
                            "SET_ACTIVE_PAGE_INDEX", 1);
                    }, 10);
                });
            }
        }
    };
</script>

<style scoped>
    TabContentItem>* {
        font-size: 30;
        text-align: center;
        vertical-align: center;
    }
</style>

компоненты / модальное. vue

<template>
    <StackLayout>|
        <button text="go to 1" @tap="$modal.close(true)" />
    </StackLayout>|
</template>

<script>
    export default {};
</script>

<style scoped>
    button {
        font-size: 30;
        text-align: center;
        vertical-align: center;
        color: black;
    }
</style>
...