当前位置： 移动技术网 > IT编程>网页制作>Html5 > iview的Affix插件遇到滚动时候的bug处理方法

iview的Affix插件遇到滚动时候的bug处理方法

2019年04月05日  | 移动技术网IT编程  | 我要评论

最近有个需求，是用vue做的页面，其中嵌入了一个tinymce编辑器，编辑器设置了自动调整高度，也就是说编辑器中内容越多，高度就会自动撑高

我们需要再页面最下方放一个保存按钮，保存按钮必须固定在屏幕下方，本来想用position:fixed这种简单方法，但是业务比较特殊，不能这么用，无奈只能用position:absolute来

为了省去不必要的麻烦，就用了iview的affix组件，但是经过实际测试，发现有点问题，最后解决方法是触发一次resize事件

export default {
        data(){
            return {
                affixinit:false
                }
            }
        },
        computed:{

        },
        mounted(){
            
        },
        deactivated() {
            window.removeeventlistener('scroll',this.initaffix,true);
        },
        activated() {
            window.addeventlistener('scroll',this.initaffix,true);
        },
        components: {
          
        },
        methods:{
            initaffix(){
                if(!this.affixinit){//affix组件有bug，需要触发一次resize事件才能正常
                    this.affixinit = true;
                    if(document.createevent) {
                        let event = document.createevent("htmlevents");
                        event.initevent("resize", true, true);
                        window.dispatchevent(event);
                    } else if(document.createeventobject) {
                        window.fireevent("onresize");
                    }
                    console.log('resize dispatched');
                }
            }
        }
    }

 

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网