所有栏目 | 云社区 美国云服务器[国内云主机商]
你的位置:首页 > 云社区 » 正文

怎样保证js在页面元素渲染完后再执行?

发布时间:2020-04-12 09:11:42

资讯分类:js  渲染  页面  元素  发现  列表  页面
怎样保证js在页面元素渲染完后再执行?

vue.js则需要结合watch和nextTick方法来使用。具体方法如下。具体步骤:

1.在页面加载一个数据列表完成之后,页面自动滚动定位到中间某个列表元素,需要在列表数据渲染完成,计算列表高度,再控制定位到指定行。首先介绍下一开始尝试没有生效的方案,这也是大家最容易出现错误的地方,vue.js提供的mounted函数,表示挂载到实例上去之后调用该钩子。

2.运行之后,发现mounted执行的时候,获取到的height值不对,打个断点也可以发现,此时页面没有渲染完成,列表块还是一片空白。

3.此时查询官方api文档发现,有一个nextTick方法,意思是在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法,获取更新后的 DOM。使用之后发现,还是不能解决我所需要的效果。

4.继续查询api文档发现,watch方法,用于观察Vue实例上的数据变动。对应一个对象,键是观察表达式,值是对应回调,再次尝试,运行后发现还是不行。

5.最终把watch和nextTick组合一起watch:{ showList:function(){ this.goPrice(0); }}showList对应表格页面的绑定变量

留言与评论(共有 0 条评论)
   
验证码:
Top