iview的Affix插件遇到滚动时候的bug处理方法
最近有个需求,是用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处理方法的更多相关文章
- jQuery-全屏滚动插件【fullPage.js】API 使用方法总结
jQuery-全屏滚动插件[fullPage.js]API 使用方法总结 jQuery-全屏滚动插件fullPage.js使用方法总结 作者github及下载地址:https://github.c ...
- Bootstrap 附加导航(Affix)插件
bootstrap 附加导航(Affix)插件允许某个div元素固定到页面中的某个位置.您可以打开或关闭使用该插件之间进行切换 后续再写
- QT visual stuido 集成插件不能打开ui文件的解决方法(去掉xml的UTF8标记)
QT visual stuido 集成插件不能打开ui文件的解决方法 visual studio里不能打开这个ui文件,出现warning等解决方法是:于是将<?xml version=&quo ...
- 把jQuery的类、插件封装成seajs的模块的方法
这篇文章主要介绍了把jQuery的类.插件封装成seajs的模块的方法,需要的朋友可以参考下 注:本文使用的seajs版本是2.1.1 一.把Jquery封装成seajs的模块 define(func ...
- iOSCollectioView滚动到指定section的方法
CollectioView滚动到指定section的方法 项目中的需求:collectionView顶部有一个scrollView组成的标签,点击标签,让collectionView滚动到指定的行 ...
- iview的Affix组件滚动时没有按照预期固定
业务场景 新建任务的页面,创建和重置按钮,页面没有滚动时,直接跟在内容下面:页面滚动时,固定于页面下方,不随内容进行滚动,以方便按钮的操作.效果如下: 问题以及解决办法 直接使用<Affix : ...
- 用 mCustomScrollbar 滚动条插件实现滚动更新添加数据
在公司的一个小项目中,需要从后台获取一大堆数据,为了用户体验的考虑,需要分部加载,然后就在网上找了很多的滚动插件,终于找到一个合适的.mCustomScrollbar插件地址 点击这里 它有各种各样的 ...
- infinite-scroll插件无限滚动加载数据的使用
网上对于infinite-scroll插件使用的例子不多.但由于它的出现,鼓吹了瀑布流形式的页面展示方式,所以不得不了解了解这种新的分页方式. 官网上有对infinite-scroll的详细描述,但一 ...
- swiper3插件无缝滚动配置
<html> <head> <link rel="stylesheet" href="https://cdn.bootcss.com/Swi ...
随机推荐
- MQTT介绍(1)简单介绍
MQTT目录: MQTT简单介绍 window安装MQTT服务器和client java模拟MQTT的发布,订阅 MQTT: MQTT(Message Queuing Telemetry Transp ...
- 实现自定义Session
1. 回话状态接口 /// <summary> /// 会话状态策略接口 /// </summary> public partial interface ISessionStr ...
- 回归JavaScript基础(三)
主题:JavaScript基本概念. 任何语言的核心必然会描述这门语言最基本的工作原理.这部分内容对我们来说,读起来很乏味,甚至会产生困意,但这部分内容却是重要的!我有幸拜读<JavaScrip ...
- Hibernate 集成 Ehcache 开启二级缓存
一.将 Ehcache.xml 放到 classpath 下 <?xml version="1.0" encoding="UTF-8"?> < ...
- Jboss Jmx-Console和 Jboss web-console安全设置
1.介绍 如果你暴露你的JBoss服务器通过网络(如通过启动服务器使用选项B 0.0.0.0或者通过改变jboss.bind.address首次出现0.0.0.0在.../jboss/server/d ...
- spring mvc 解决跨域问题
Spring MVC 从4.2版本开始增加了对CORS的支持. 在Controller上使用@CrossOrigin注解: // 指定域名 @CrossOrigin("http://doma ...
- 小鸡G4工程款 上手体验
前言:之前只是抱着试一试的态度在小鸡活动贴下报名,说实话之前并没有抱希望能够没选中.所以非常感谢小鸡团队给我的这次机会.这应该是我第一次参与厂家的内测活动.希望能给小鸡团队,给广大玩家带来一片实用的上 ...
- 关于UIScrollView有些你很难知晓的崩溃情形
关于UIScrollView有些你很难知晓的崩溃情形 为了实现以下的功能(按钮之间的切换效果): 简短的代码如下: // // RootViewController.m // BUG // // Co ...
- python升级 (2.6升级到3.5)
在引用模块pandas时竟然提示不支持2.6, 果断升级,在网上找了很多博客,觉得这个比较清楚(https://blog.csdn.net/my_bai/article/details/7289602 ...
- GIT学习---GIT&github的使用
GIT&github入门 版本控制的原理: 根据md5进行文件的校验[MD5的特性就是每次的输入一致则输出也一致],对于每次的修改进行一次快照 版本控制的2个功能: 版本管理 + 协作开 ...