Question

我使用fullpage.js在我的节点/电子应用程序中创建某种全屏矩阵，因此用户可以使用键盘向上/向下滚动，向左/向右滚动以始终拥有一个全屏数据记录。只要我不开始添加或删除幻灯片（数据保存在其他地方并且实时更新），这就很有效。

到目前为止我得到的代码是：

let masterRactive = new Ractive({
    el: '#clientContainer',
    template: myTemplate,
    magic: true,
    modifyArrays: true,
    data: {docs},
    computed: //some magic here,
    onrender: function () {
        $('#container').fullpage({
            navigation: true,
            showActiveTooltip: true,
            slidesNavigation: true,
            recordHistory: false,
            fixedElements: 'h1',
            paddingTop: '80px'
        });
        $.fn.fullpage.setAllowScrolling(false, 'down,up');
    }
});

要重新计算更改事件，请使用

masterRactive.observe( 'docs', function ( newValue, oldValue, keypath ) {
    $.fn.fullpage.reBuild()
})

在添加或删除幻灯片之前，一切都很有效。正确显示/隐藏数据，并且向上和向下滚动也有效，但在尝试向侧面滚动时，我总是得到Uncaught TypeError: Cannot read property 'left' of undefined。

我也试过$.fn.fullpage.destroy('all');并重新初始化每一个变化，但效果是一样的......

更新

正如我发现的那样，只有在删除的幻灯片显示的情况下才会出现此行为。如果我删除幻灯片或不活动的部分，一切似乎都有效。（即使幻灯片导航没有将e.G.从3改为2幻灯片，如果删除了一个）

Answer 1

reBuild不会做你认为的事情。来自fullPage.js docs：

更新DOM结构以适应新窗口大小或其内容。非常适合与AJAX调用或网站DOM结构的外部更改结合使用，特别是在使用scrollOverflow:true时。

请在此处查看有关如何动态添加幻灯片或部分的答案： https://stackoverflow.com/a/36643702/1081396

添加DOM元素时，fullpage.js会向左/向右滑动

1 个答案: