fullpage插件动态添加节点，页面不能动态渲染问题解决方法

fullpage插件动态添加节点，页面不能动态渲染问题解决方法

由于自己在用fullpage这个插件的时候，遇到了一个坑，各种百度都没有找到解决办法，最后查看源码在找到，故此记录下来，可以给同样遭遇的同学一个参考~~~

大家都知道fullpage是基于JQ的一个全屏滚动插件，基本效果我就不多说了，大家可以去官网查看，这里主要说一下在动态添加翻页的时候，页面无法同步渲染的问题。

• 这里是我的代码

//HTML
<div id="app">
    <div class="section section1">
        <h1>第一屏</h1>
    </div>
    <div class="section section2">
        <div class="slide">
            <h1>第二屏第一页</h1>
            <button id="btn">点击增加第三页</button>
        </div>
        <div class="slide"><h1>第二屏第二页</h1></div>
    </div>
    <div class="section section3">
        <h1>第三屏</h1>
    </div>
</div>

//JS代码
$('#app').fullpage({        //全屏翻页插件
    slidesNavigation:true,      //是否显示左右滑块的项目导航
    loopHorizontal:false,       //左右滑块是否循环滑动    
    controlArrowColor:'rgba(0,0,0,0.2)',     //左右滑块的箭头的背景颜色
});
$('#btn').click(function(){
    $('.section2').append('<div class="slide"><h1>第二屏第三页</h1></div>');
})

页面效果

点击按钮之后，页面效果没变，但是DOM已经生成了

这个时候如果点击按钮的话，fullpage是不会自动帮我们显示出第二页第三屏的，也就达不到我们想要的效果。这个时候就要重新实例化fullpage，重新渲染页面了。
代码如下

$('#app').fullpage({        //全屏翻页插件
    slidesNavigation:true,      //是否显示左右滑块的项目导航
    loopHorizontal:false,       //左右滑块是否循环滑动    
    controlArrowColor:'rgba(0,0,0,0.2)',     //左右滑块的箭头的背景颜色
});
$('#btn').click(function(){
    $('.section2').append('<div class="slide"><h1>第二屏第三页</h1></div>');
    $('#app').fullpage({        //全屏翻页插件
        slidesNavigation:true,      //是否显示左右滑块的项目导航
        loopHorizontal:false,       //左右滑块是否循环滑动    
        controlArrowColor:'rgba(0,0,0,0.2)',     //左右滑块的箭头的背景颜色
    });
})

但是这样，这个时候就会出问题，这个时候页面就会乱掉，并且下面会多出现几个点，就像这样。

这是因为fullpage插件会帮我们生成一些节点，这个时候再实例化一次，就会又生成一次多的节点，这个时候只能先把fullpage插件动态生成的东西给删除，然后再重新渲染。
还好fullpage插件给了我们方法，但是他的官方文档却并没有告诉我们解决办法。我找来好久，终于让我找到方法了，代码如下：

$('#app').fullpage({        //全屏翻页插件
   slidesNavigation:true,      //是否显示左右滑块的项目导航
    loopHorizontal:false,       //左右滑块是否循环滑动    
    controlArrowColor:'rgba(0,0,0,0.2)',     //左右滑块的箭头的背景颜色
});
$('#btn').click(function(){
    $('.section2').append('<div class="slide"><h1>第二屏第三页</h1></div>');

    $.fn.fullpage.destroy(true);   //删除fullpage生成的节点和事件

    $('#app').fullpage({        //全屏翻页插件
        slidesNavigation:true,      //是否显示左右滑块的项目导航
        loopHorizontal:false,       //左右滑块是否循环滑动    
        controlArrowColor:'rgba(0,0,0,0.2)',     //左右滑块的箭头的背景颜色
    });
})

这个时候再点击按钮，就能正常显示了

我只是个菜鸟
如果大家有更好的方法，欢迎留言~~~