在做项目时,我们经常要用到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循环渲染完毕的时间,不同设备的时间也是不一样的)

 

转载于:https://www.cnblogs.com/mozhaocong/p/10435184.html

Logo

前往低代码交流专区

更多推荐