在做项目时，我们经常要用到for循环渲染dom，常用到的主要时一些for循环的图片
然而jv-for循环是有时就需要做些等待for循环渲染后在执行的事件，例如（项目中用到的滑动组件，图片加载完后要重定向，或者是一些需要等待渲染完后才触发的事件）
解决方法一
主要是用到vue中的 watch + vm.nextTick
watch是 监听某一个data数据发生变化就执行方法
nextTich: 在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。
下面是例子代码
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
|
<!
DOCTYPE
html>
<
html
lang="en">
<
head
>
<
meta
charset="UTF-8">
<
title
>Title</
title
>
</
head
>
<
body
>
<
setion
>
<
option
value="1" v-for="(item,key) in arr" :key="key">{{ item }}</
option
>
</
setion
>
</
body
>
<
script
type="text/javascript">
vm = new Vue({
el:'.app',
data: {
arr: [],
},
wathc:{
arr: function() {
this.$nextTick(function(){
/*现在数据已经渲染完毕*/
})
}
},
mounted:function() {
var that = this;
axios.get('url',{
params:{
link: '',
}
}).then(function(res){
that.arr = res;
})
}
})
</
script
>
</
html
>
|
不过有时还有一种情况就是
wathc监听数组的变化，用nextTick触发事件，正常来讲是for循环渲染后只触发一次nextTick事件。然而本人试过在使用微信js-sdk做微信打开相册上传图片功能时，需要等他选择完图片渲染完在做别的操作
本人当时就用到了wathc+nextTick，发现一个问题就是for中每次加一个数据就触发一次nextTick，（就是例如for添加了2个数据，就触发两次nextTick），不是本人要求的那个，需求应该时渲染完后只触发一次
nextTick，也就时等最后一个数据渲染完成后触发，，（主要是他触发了多次wathc，造成多个nextTick事件）
这时就要用到 setInterval 定时器 设置了，
代码是
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<setion>
<option value="1" v-for="(item,key) in arr" :key="key">{{ item }}</option>
</setion>
</body>
<script type="text/javascript">
vm = new Vue({
el:'.app',
data: {
arr: [],
imgSetInterval:null,
},
wathc:{
arr: function() {
clearInterval(this.imgSetInterval)
this.$nextTick(function(){
this.imgSetInterval=setInterval(function () {
console.log('img定时器')
clearInterval(that.imgSetInterval)
},1000)
})
}
},
mounted:function() {
var that = this;
axios.get('url',{
params:{
link: '',
}
}).then(function(res){
that.arr = res;
})
}
})
</script>
</html>
上面是针对vue的v-for循环渲染完毕在加载事件，本人觉得是比较好的解决办法
还有一种是js的定期器
使用setTimeout中的事件差来解决，不过本人不推荐，主要是有个时间的不确定性，（不知道v-for循环渲染完毕的时间，不同设备的时间也是不一样的）
已为社区贡献2条内容
所有评论(0)