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)',     //左右滑块的箭头的背景颜色
    });
})

这个时候再点击按钮,就能正常显示了
这里写图片描述

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

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值