angularjs中ng-if導致閃屏

問題現象

頁面中存在兩個互斥的 INPUT, 都使用 ng-if進行顯示判斷,同時只顯示一個。

<button ng-click="refresh()" ng-show="testIf==true" class="btn brand-btn-color-a btn-refresh">刷新1</button>
<button ng-click="refresh()" ng-show="testIf==false" class="btn brand-btn-color-a btn-refresh">導出2</button>
<button  ng-click="exportCloudDetail()" ng-if="showByVersion()" has-permission="PRIV_REPORT_MANAGE" class="btn brand-btn-color-a">導出</button>

當這段代碼在一個比較簡單的頁面中時,點擊導出按鈕,刷新1按鈕和導出2按鈕可以正常切換。當在一個比較大的項目中時這個切換過程會出有兩個按鈕同時出現的短暫瞬間

解決方法

只用一個按鈕,需要切換時只切換內部的功能,不做界面上的切換


總結

在頁面中,界面的變化會涉及DOM的變化,然後瀏覽器進行渲染。這個過程相對來說是比較慢的。因此在處理時,儘量做功能上的處理,不改變界面的渲染。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章