最近有个需求,是用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');
}
}
}
}

iview的Affix插件遇到滚动时候的bug处理方法的更多相关文章

  1. jQuery-全屏滚动插件【fullPage.js】API 使用方法总结

    jQuery-全屏滚动插件[fullPage.js]API 使用方法总结   jQuery-全屏滚动插件fullPage.js使用方法总结 作者github及下载地址:https://github.c ...

  2. Bootstrap 附加导航(Affix)插件

    bootstrap 附加导航(Affix)插件允许某个div元素固定到页面中的某个位置.您可以打开或关闭使用该插件之间进行切换 后续再写

  3. QT visual stuido 集成插件不能打开ui文件的解决方法(去掉xml的UTF8标记)

    QT visual stuido 集成插件不能打开ui文件的解决方法 visual studio里不能打开这个ui文件,出现warning等解决方法是:于是将<?xml version=&quo ...

  4. 把jQuery的类、插件封装成seajs的模块的方法

    这篇文章主要介绍了把jQuery的类.插件封装成seajs的模块的方法,需要的朋友可以参考下 注:本文使用的seajs版本是2.1.1 一.把Jquery封装成seajs的模块 define(func ...

  5. iOSCollectioView滚动到指定section的方法

    CollectioView滚动到指定section的方法   项目中的需求:collectionView顶部有一个scrollView组成的标签,点击标签,让collectionView滚动到指定的行 ...

  6. iview的Affix组件滚动时没有按照预期固定

    业务场景 新建任务的页面,创建和重置按钮,页面没有滚动时,直接跟在内容下面:页面滚动时,固定于页面下方,不随内容进行滚动,以方便按钮的操作.效果如下: 问题以及解决办法 直接使用<Affix : ...

  7. 用 mCustomScrollbar 滚动条插件实现滚动更新添加数据

    在公司的一个小项目中,需要从后台获取一大堆数据,为了用户体验的考虑,需要分部加载,然后就在网上找了很多的滚动插件,终于找到一个合适的.mCustomScrollbar插件地址 点击这里 它有各种各样的 ...

  8. infinite-scroll插件无限滚动加载数据的使用

    网上对于infinite-scroll插件使用的例子不多.但由于它的出现,鼓吹了瀑布流形式的页面展示方式,所以不得不了解了解这种新的分页方式. 官网上有对infinite-scroll的详细描述,但一 ...

  9. swiper3插件无缝滚动配置

    <html> <head> <link rel="stylesheet" href="https://cdn.bootcss.com/Swi ...

随机推荐

  1. 一步一步 Pwn RouterOS之调试环境搭建&&漏洞分析&&poc

    前言 本文由 本人 首发于 先知安全技术社区: https://xianzhi.aliyun.com/forum/user/5274 本文分析 Vault 7 中泄露的 RouterOs 漏洞.漏洞影 ...

  2. Android Apk增量更新

    前言 有关APK更新的技术比较多,例如:增量更新.插件式开发.热修复.RN.静默安装. 下面简单介绍一下: 什么是增量更新?   增量更新就是原有app的基础上只更新发生变化的地方,其余保持原样. 与 ...

  3. Linux服务器安装redis数据库教程

    前面小Alan给大家说了jdk的安装,这篇跟大家聊聊redis非关系型数据库在Linux服务器的安装. redis简单介绍 REmote DIctionary Server(Redis) 是一个由Sa ...

  4. 记录一次mybatis查询返回为空数据库却能查询到数据的经历

    昨晚上测试人员给发了一条测试数据,说是根据这条数据接口返回信息为空.之后根据给的信息去数据库查询了下,明明是有数据的.但是用mybatis就是查询不出来.奇了怪了,自己测试的数据都能查询出来,为何这条 ...

  5. ubuntu安装zeromq

    官网地址:http://zeromq.org/ ubuntu下zmq安装 (1)下载:wget http://download.zeromq.org/zeromq-4.1.4.tar.gz (2)解压 ...

  6. html5 audio vedio and video.js

    查看audio play事件http://jplayer.org/HTML5.Media.Event.Inspector/ media.seekable, buffered,played这些数据 we ...

  7. 设计多选按钮ListChooseView

    设计多选按钮ListChooseView 答应某位女屌丝而写的控件,效果还不错,开源给大家^_^! 效果图: 源码: // // ListChooseView.h // ScrollChooseBut ...

  8. [转] iOS 动画库 Pop 和 Canvas 各自的优势和劣势是什么?

    iOS 动画库 Pop 和 Canvas 各自的优势和劣势是什么? http://www.zhihu.com/question/23654895/answer/25541037 拿 Canvas 来和 ...

  9. swift中,Optional、?与!之间的关系

    swift中,Optional.?与!之间的关系 Optional <ClassName> 与 ClassName? 等价 对 ClassName! 强制取值会导致崩溃(如果对象为nil时 ...

  10. 可以简易设置文字内边距的EdgeInsetsLabel

    可以简易设置文字内边距的EdgeInsetsLabel 最终效果: 源码: EdgeInsetsLabel.h 与 EdgeInsetsLabel.m // // EdgeInsetsLabel.h ...