angularjs页面加载时闪屏问题

由于有时候网速或者其他的原因导致数据刷新很慢,如果使用{{ }}绑定,就会显示出变量原型及{{}},
首先想到的解决办法是:首页用ng-bind绑定数据,其他的可以用{{ }}绑定。
使得之前的 
<div>你的编号是{{index + 1}} </div>
华丽丽的转化为
<div>你的编号是<span ng-bind= "index+1"></span></div>
, 也不知道你看着感觉如何,反正我是看着有点揪心,我好端端的只需要一个元素就能搞定的问题,现在需要两个元素,如果遇到更复杂的问题那就真的头大了,于是我又找到了另一种解决办法:
通过 ng-cloak指令来解决,直接为元素添加此属性,angularjs会将首先将带有 ng-cloak的元素设置为display=none,等到angularjs解析到带有 ng-cloak的标签时,再去掉display=none样式以及 ng-cloak属性。
此时又会发现还有一个问题,当同一个页面有很多ng-cloak时,加载完第一个带有ng-cloak的元素,其他的带有ng-cloak元素的display:none也一起消失了,此时之前的问题又发生了,为了解决这个问题,我们不妨这样写:
<div ng-cloak class= ‘ng-cloak’ >{{index + 1}} </div>
这样就完美的解决了上述问题。
  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
在uniapp小程序中,如果页面过程中涉及到较多的网络请求或者计算,可能会导致页面首次出现短暂的白或者现象,给用户带来不好的体验。为了解决这个问题,可以采用以下几种方式: 1. 使用uniapp提供的页面功能,将需要的资源在进入页面前提前,这样可以有效减少页面间,避免现象。具体可以参考uniapp官网文档中的“预页面”部分。 2. 在uniapp中可以通过设置页面背景色来避免现象。在App.vue中使用uni页面生命周期函数onLaunch设置页面背景色,例如: ```javascript onLaunch: function() { uni.setBackgroundColor({ backgroundColor: '#f5f5f5', backgroundColorTop: '#f5f5f5', backgroundColorBottom: '#f5f5f5' }) } ``` 这样,在页面过程中,即使还没有渲染出内容,页面的背景色也能够填充幕,避免出现现象。 3. 将页面按照功能模块进行拆分,使用uniapp提供的分包功能,将不同的功能模块打包成不同的子包,在需要使用功能模块再进行,这样可以有效减少首次间,避免现象。 4. 对于一些比较耗的计算和网络请求,可以使用uniapp提供的异步方法,将这些操作放到异步任务中执行,避免阻塞页面的渲染,从而减少现象的出现。 综上所述,可以通过预、设置背景色、分包和异步等方式来减少页面首次间,从而避免现象的出现。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

_陌默

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值