fullpage插件动态添加节点,页面不能动态渲染问题解决方法
来源:互联网 发布:sar源码 编辑:程序博客网 时间:2024/04/27 23:33
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)', //左右滑块的箭头的背景颜色 });})
这个时候再点击按钮,就能正常显示了
我只是个菜鸟
如果大家有更好的方法,欢迎留言~~~
0 0
- fullpage插件动态添加节点,页面不能动态渲染问题解决方法
- jQuery EasyUI动态添加控件或者ajax加载页面后不能自动渲染问题的解决方法
- jQuery EasyUI动态添加控件或者ajax加载页面后不能自动渲染问题的解决方法
- jQuery EasyUI动态添加控件或者ajax加载页面后不能自动渲染问题的解决方法
- jQuery EasyUI动态添加控件或者ajax加载页面后不能自动渲染问题的解决方法
- JS动态添加节点后渲染为EasyUI控件,EasyUI动态渲染解析解决方案
- jquerymobile动态添加元素之后不能正确渲染解决方法
- Tchart 动态添加节点
- dtree动态添加节点
- jquery动态添加节点
- hadoop动态添加节点
- zTree动态添加节点
- Hadoop动态添加节点
- 动态添加HDFS节点
- Jquery动态添加及删除页面节点元素
- 动态插入节点方法
- JS动态修改页面EasyUI datebox不生效、EasyUI动态添加Class、EasyUI动态渲染解析解决方案
- JS动态修改页面EasyUI datebox不生效、EasyUI动态添加Class、EasyUI动态渲染解析解决方案
- Intent传递实现Parcelable接口对象
- Oracle数据库表空间
- iOS CGImageRef
- linux下使用mkae_rt命令打包idl code为可执行程序
- 利用AJAX读取本地xml
- fullpage插件动态添加节点,页面不能动态渲染问题解决方法
- System.arraycopy
- Android Studio没有SVN菜单
- mathematica--关联
- 目标检测
- 【kuangbin带你飞】之【搜索】 poj1321 棋盘问题
- 迭代器模式
- 卷积神经网络(CNN)的参数优化方法
- http_status_unsupported_media (415) the server is refusing to service the request because the entit