報表怎樣實現滾動的公告效果?

2021-08-29 05:31:52 字數 1701 閱讀 5443

dashboard 以豐富的動態、可互動的視覺化介面為使用者提供了更好的資料使用體驗,讓決策者能夠更高效的了解企業的重要資訊和細節層次。在 dbd 的各種動態效果中,滾屏是較為常見的一種,例如下圖中的資料列表因為布局是固定的,因此就需要滾動顯示資料。

通常報表中見到的滾屏是因為「頁面大、視窗小」,也就是開啟的視窗區域容納不了整個頁面的內容,需要靠鍵盤的方向鍵或滑鼠滾輪來移動檢視。而在 dbd 中,為了更好的互動效果,需要滾動自動持續進行,只有當滑鼠移到該區域時才暫停。這種方式雖說已經比較常見了,但一般來說報表廠商卻並沒有直接提供,而是需要通過 jquery,js 來實現。現在我就給大家介紹一下如何實現這種文字滾屏效果。

我們將在潤幹報表設計器自帶的「裝置故障分析.rpx」基礎上實現文字滾屏例項。

1. 資料集整理

對於從資料庫讀取的資料,可以通過集算器,將資料整理成下面截圖中的效果。為了方便做效果,這裡我直接將 ds2 這個內建資料中的所有欄位的值整理到「裝置」這個欄位中,並且在裡面加上了些空格,以便頁面上縮排的效果好看些。

2. 合併單元格

將 g15 列刪除,b15—f15 選中,合併。

3. 單元格資料型別設定為 html

4. 設定單元格表示式,如上圖所示。下面是具體的表示式。

=「」+replace(string@q(ds2.select( 裝置)),「,」,「

」)+「」

其中:οnmοuseοver=this.stop() 表示當滑鼠以上區域的時候滾動停止;

οnmοuseοut=this.start() 表示當滑鼠移開的時候繼續滾動。

1. 調整樣式

原 b15-f15 設定了各行異色,因為我們的文字滾動項作為統一的一串內容,所以按照以上設定,效果感覺會有些突兀,如下圖所示。

去掉 b15-f15 背景色的設定,這樣滾動區域就整體渾然一體。

經過以上步驟我們的資料列表就在 dbd 面板中滾動起來了,並且當滑鼠指向資料的時候就會停止滾動,滑鼠移開的時候就繼續滾動了,這樣的互動效果無疑會為你的大屏展現錦上添花。

上面這個小例子簡單實現了文字滾動顯示的效果。下面我具體講解下看似神奇的標籤的各個屬性值,相信看過後一定會幫助您實現更好的文字滾動效果:

另外,您也可以將 <marquee> 和 之間的內容替換成影象或其它物件。

怎麼樣,是不是您已經在摩拳擦掌躍躍欲試了?別猶豫,讓我們一起來豐富 dashboard 效果,讓頁面效果動起來吧!

React原生 實現公告無限滾動效果

import react,from react import index.less export default class scroll extends component,animate false,頁面載入的時候,設定乙個永恆的定時器,1.5s後就會執行定時器中的邏輯 componentdid...

ScrollView 實現滾動效果

布局檔案 縱向滾動條 需要新增滾動條的內容.水平滾動條 內容 設定滾動條屬性 sethorizontalscrollbarenable false setverticalscrollbarenable false 監聽scrollview何時滑到底部 setontouchlistener activ...

實現滾動導航效果

由於近期有乙個頁面需要滾動加導航效果,以前在網上搜了乙個滑鼠滾動事件做了乙個效果,但 太冗餘,不喜歡,所以抽時間研究了一下,使用jquery 滾動監聽寫了乙個小demo,希望能幫助到有需要的朋友。如下 style type text css cont li cont ul cont menu men...