0

我刚开始使用 Svelte/Sapper，我没有得到这个愚蠢的东西。也许是因为我习惯了 Vue 并且我不了解 Svelte 的范式。

我基本上是在制作滑块或旋转木马。为此，我需要知道要显示的当前部分是什么（这将有助于确定入口动画）并记录前一部分（只要它需要过渡出来）。

我想我可以拥有一个

<button on:click="set({ section: 'products'})">Go to Products</button>

切换部分，这工作正常。但是我想在 onstate() 中进行检测，以便在更改部分时，prop prevSection 也会更新。

这是我到目前为止的（相关）代码：

<h1>Current section : {section}</h1>
<button on:click="set({ section: 'products'})">Go to Products</button>
<button on:click="set({ section: 'hr'})">Go to HR</button>
<button on:click="set({ section: 'verticals'})">Go to Verticals</button>
<div id="container">
    <Slideshow bind:section></Slideshow>
    <Slideshow bind:prevSection></Slideshow>
</div>

<style>/* Not important */</style>

<script>
    export default {
        onstate({ changed, current, previous }) {
            if (changed.section && previous) {
                this.set({prevSection: previous.section});
            }
        },

        oncreate() {},
        onupdate() {},
        ondestroy() {},

        components: {
            Slideshow: '../components/Slideshow.html'
        },

        data() {
            return {
                section : 'products',
                prevSection : ''
            };
        }
    }
</script>

我想要一个初始状态，其中 section=products 和 prevSection 为空，然后每次单击按钮时，prevSection 都会获取部分的值，然后部分更新为按钮指定的新值。

非常感谢你的帮助 ！

4

2 回答 2

0

不确定这是否是您要查找的内容，但通过将逻辑从 onstate 移动到 onupdate，我能够在您的示例中正确更新 section 和 prevSection 变量

于 2019-04-20T03:14:23.840 回答
0

原来问题不在于代码本身，而在于

<Slideshow bind:prevSection></Slideshow>

显然正在接收prevSection道具，但我试图 console.log()部分属性。所以代码有点工作，我只是检查了错误的道具。

感谢任何花时间回答甚至只是看看它的人！

于 2019-04-30T13:28:44.557 回答