Question

我有两个页面0和1。页面0中有一个按钮，用于打开模式，该模式中的按钮应关闭模式并导航至第二页。我试图通过绑定:selectedindex来实现这一点，但是它不起作用。有什么想法吗？这是playground

如果单击1，然后依次按go to 0，show modal和go to 1，则将转到第1页。

如果单击0，然后依次单击show modal和go to 1，则将转到第0页。

P.S。

如果我延迟提交突变，问题就解决了，但事实是用户体验不好，用户会先看到第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()

components / App.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>

components / Modal.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>

底部导航程序化导航

0 个答案: