帆軟報表(finereport)實現自動滾屏效果


例如Demo:IOS平台年度數據報表。

展示內容豐富,一個頁面中存在多個圖表、內容,超出了瀏覽器窗口的大小導致內容展示不全。

為了能夠預覽這個報表的全部內容,可以使用JS滾屏效果來實現。

操作步驟:

點擊菜單模板→模板web屬性→分頁預覽設置→為改模板單獨設置→添加“加載結束”事件

JS腳本代碼:

 1 setTimeout(function(){
 2     //鼠標點擊結束
 3     $('.content-container').click(function(){
 4         if(timer){ 
 5             clearInterval(timer); 
 6         }
 7     })
 8     var h=-1;
 9     var timer = setInterval(function(){
10         //獲取當前滾動條高度
11         var current = $('.content-container')[0].scrollTop;
12         if(current==h){ 
13             //滾動到底端,刷新屏幕,並返回頂端 
14             clearInterval(timer); 
15             window.location.reload(); 
16             contentPane.$contentPane.scrollTop(0); 
17         }
18         else
19         { 
20             //以25ms/3.5px的速度滾動 
21             h=current; 
22             $('.content-container')[0].scrollTop=h+3.5;
23         }
24     },25);
25 },2000)

保存模板,點擊分頁預覽就會實現自動滾動效果。如果想要停止滾動,鼠標左鍵點擊頁面即可。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM