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的变化,然后浏览器进行渲染。这个过程相对来说是比较慢的。因此在处理时,尽量做功能上的处理,不改变界面的渲染。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值