Anfo
Anfo
  • 发布:2020-06-02 15:59
  • 更新:2022-06-01 17:36
  • 阅读:2185

请问小程序中如何正确得到dom结构渲染完成的时机?

分类:uni-app

我写了一个类似Transition的组件用来制作css动画,在修改data后,使用this.$nextTick 以期望能捕获dom结构渲染完成后的回调,可是并不成功,我在nexttick后设置timeout50-100 即可生效。
我知道原生小程序setData后会有回调
请问uniapp中应该如何获得这个时机呢?

2020-06-02 15:59 负责人:无 分享
已邀请:
DCloud_UNI_HT

DCloud_UNI_HT

是不是在 添加类的元素上,有个 v-if 之类的控制了 元素的显示隐藏

  • Anfo (作者)

    就是模仿Vue的原生Transition,

    然后再before-enter的类设置完成并渲染到dom之后 就立即取消来实现一个进场的动画,entering就控制了这个类,然后entering设置true后调用nexttick 再置为false,并没有 触发动画,偶尔可以,偶尔不行。但是加个settimeout100 就一定可以,50也偶尔可以偶尔不行


    2020-06-04 11:25

  • DCloud_UNI_HT

    回复 Anfo: 现在只能暂时 加 setTimeout 去延时一下,可能 nextTick 的实现还是有些问题,要优化一下。我先排查一下问题


    2020-06-04 14:20

  • Anfo (作者)

    回复 DCloud_UNI_HT: 好的


    2020-06-04 14:49

DCloud_UNI_HT

DCloud_UNI_HT

贴一下 你的代码片段吧

  • Anfo (作者)

       if(newVisible){    
    if(this._delayInstance){
    clearTimeout(this._delayInstance);
    this.leaving = false;
    this.leaveActive = false;
    }
    this.visibleDelay = true;
    this.entering = true;
    this.$nextTick(()=>{
    this.enterActive = true;
    this.$nextTick(()=>{
    setTimeout(()=>{
    this.entering = false
    this.$nextTick(()=>{
    if(this._enteringInstance){
    clearTimeout(this._enteringInstance);
    }
    this._enteringInstance = setTimeout(()=>{
    this.enterActive = false;
    // r()
    }, this.duration);
    });
    }, 100)
    })
    });
    }else{
    // xxxxx
    }

    看到settimeout(xxx, 100) 那,就是那儿 如果不设置100 就不行 了 50就偶尔行 偶尔不行。


    2020-06-04 10:26

Anfo

Anfo (作者) - 我是个好人

                        if(newVisible){  
                            if(this._delayInstance){  
                                clearTimeout(this._delayInstance);  
                                this.leaving = false;  
                                this.leaveActive = false;  
                            }  
                            this.visibleDelay = true;  
                            this.entering = true;  
                            this.$nextTick(()=>{  
                                this.enterActive = true;  
                                this.$nextTick(()=>{  
                                    setTimeout(()=>{  
                                        this.entering = false  
                                        this.$nextTick(()=>{  
                                            if(this._enteringInstance){  
                                                clearTimeout(this._enteringInstance);  
                                            }  
                                            this._enteringInstance = setTimeout(()=>{  
                                                this.enterActive = false;  
                                                // r()  
                                            }, this.duration);  
                                        });  
                                    }, 100)  
                                })  
                            });  
                        }else{  
                            // xxxxx  
                        }

看到settimeout(xxx, 100) 那,就是那儿 如果不设置100 就不行 了 50就偶尔行 偶尔不行。

efficient_work

efficient_work

现在有渲染完成后的回调吗,或者说怎么监听到渲染完成

要回复问题请先登录注册