FineReport中如何实现自动滚屏效果

最新推荐文章于 2023-09-11 21:33:33 发布

转载最新推荐文章于 2023-09-11 21:33:33 发布 · 206 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://yq.aliyun.com/articles/559311

本文介绍如何在FineReport中实现JS滚屏效果，通过添加加载结束事件并编写JS代码，使页面内容自动滚动，同时支持鼠标点击暂停。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

对于一些特殊的模板，可能为了展示的更加丰富、全面会在一个页面放置很多图表。表格等内容。由于内容过多，超出了浏览器窗口的大小导致内容展示不全的情况。这样我们就需要用到JS滚屏效果来解决，这里主要介绍在FineReport中的具体制作方法。

添加加载结束事件

点击菜单模板>模板web属性>分页预览设置，选择“为该模板单独设置”，添加一个“加载结束”后事件，如下图所示：

JS代码如下：

<span style="font-family:'微软雅黑', 'Microsoft YaHei';font-size:14px;">//从页面加载结束后延迟2000MS执行事件（滚动）<br>setTimeout(function(){<br>//当鼠标点击时<br>$(".content-container").click(function()<br>{<br>//如果页面正在执行事件（滚动）<br>  if(interval)<br>  {<br>//取消事件（滚动）<br>  clearInterval(interval);<br>  }<br>})<br>var old=-1;<br>//按照指定周期不断的调用滚动事件<br>var interval=setInterval(function()<br>{ <br>currentpos=$(".content-container")[0].scrollTop;<br>if (currentpos==old){<br>//取消事件（滚动）<br>clearInterval(interval);<br>//重新加载页面<br>window.location.reload();<br>}<br>else<br>{<br>old=currentpos;<br>//以25MS的速度每次滚动3.5PX<br>$(".content-container")[0].scrollTop=currentpos+3.5;<br>}<br>}<br>,25);<br>},2000)<br></span>

保存与预览

保存模板，点击分页预览，就会出现上面的自动滚动效果。如果想要停止滚动的话，用鼠标左键点击一下窗口即可。

本文转自雄霸天下啦 51CTO博客，原文链接：http://blog.51cto.com/10549520/1903553，如需转载请自行联系原作者