在做項目時，我們經常要用到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循環渲染完畢的時間，不同設備的時間也是不一樣的）