angular4 使用swiper 首次加载问题(一)
angular 在使用外部插件swiper 还是有不少小坑的,下面来聊一聊。angular在使用swiper 的一些坑
一开始觉得使用外部引入的方式比较好,就在外部定义了。简单快捷方便,
但是在开发后期,发现会出现这样的bug (首次加载swiper 不起作用,只有在二次刷新的时候,才能发挥作用。)深入研究发现,这个主要是angular的一个运行机制问题。
后来就开始找解决方案
我目前采用的是 先 cnpm install swiper
然后在需要引入的页面应用 import * as swiper from Swiper
之后再当前生命周期,初始化的时候,初始化这个swiper 就解决这个问题了。
以上是第一种方法。
还有另外的方案(是同事弄的)
首先建立一个js文件。
将需要初始化的swiper函数放在js文件中。
然后用require的方式,放在初始化函数当中。如果能够直接调用require的话,就直接调用,如果不能的话,就需要在函数什么require 方法。
angular4 使用swiper 首次加载问题(一)的更多相关文章
- mvc中多参数URL会很长,首次加载不传参数让url很短,路由规则实现方法[bubuko.com]
如要实现列表中地址全路径“bubuko-11-2.html”,在首次进入时,使用短路径“bubuko.html”,只有再次href后才显示全路径“bubuko-11-2.html”,下面使用路由规则来 ...
- RequireJS首次加载偶尔失败
现象:第一次加载JS文件,首次加载偶尔失败: 原因:require(['jquery', 'operamasks', 'zTree', 'jQueryCookie'],中前后引用同步加载: 解决方式: ...
- vue项目首次加载过慢
vue项目优化 浅谈 Vue 项目优化 关于vue在app首次加载缓慢的解决办法 nginx开启缓存 在http部分加入 #要想开启nginx的缓存功能,需要添加此处的两行内容! #设置Web缓存区名 ...
- web页面判断是否首次加载
判断web页面是否是首次加载: if(!window.name){ window.name ='name' this.setState({ note:true })}
- React Native 首次加载白屏优化
RN首次加载都会有个白屏过程,一般都会有500ms+的白屏时间,原生页面开发同样的页面会能够快速显示而在RN页面中有个明显的等待过程,这个会影响用户体验. 1.使用过渡页面 简单处理可以在白屏过程中加 ...
- 首次加载进来DEV控件列表第一行颜色总是不对,后台代码显示的数据正确
1:行改变的颜色正确的颜色: 1.1颜色效果如下图: 1.2:设置行改变颜色: 2:结果首次加载第一行颜色为: 3:解决方案: 3.1 :Views-->OptionsSelection --& ...
- C# 后台首次加载时才执行
protected void Page_Load(object sender, EventArgs e) { if (!IsPostBack) { } } 写在 if (!IsPostBack) { ...
- ExpandableListView的首次加载全部展开,并且点击Group不收缩、
最近在做Android市场的应用.看到好多市场类的QQ应用宝做的算是最完美的了.在项目中要实现它的下载管理的实现,而界面如下: 反编译得到使用的是ExpandableListView.而怎么首次加载全 ...
- vue 首次加载缓慢/刷新后加载缓慢 原因及解决方案
# vue 首次加载缓慢/刷新后加载缓慢 原因及解决方案 最近做项目发现一个问题,页面每次刷新后加载速度都非常慢,20s左右,在开发环境则非常流畅,几乎感觉不到,本文参考望山的各种方案优化 1,关闭打 ...
随机推荐
- css 颜色表示法
css颜色值主要有三种表示方法: (1)颜色名表示,如:red红色,gold金色 (2)rgb表示,如:rgb(255,0,0)表示红色 (3)16进制数值表示,如:#ff0000表示红色,这种可以简 ...
- 6. 深度克隆_ES7**_arr.includes('孙悟空')
1. 如何实现深度克隆 利用 JSON 方法 (没办法克隆函数数据) `JSON.parse(JSON.stringify(xxx))` 自定义方法 检查所有数据类型的方法 `Object.proto ...
- ES6 模块机制
ES6 实现了模块功能 将文件当作独立的模块,一个文件一个模块 每个模块可以导出自己的API成员,也可以导入其他模块或者模块中特定的API ES6 模块的设计思想,是尽量的静态化,使得编译时就能确定模 ...
- 总结:极光推送java服务端(1)
遇到的问题: 1.怎么用极光推送 2.极光推送发送失败报错 返回{ } 3.透传和推送区别以及怎么设置 我的解决方案: 问题1.极光推送类里面有不同的方法,需要发给那些人就调用相应的方法.有安卓.io ...
- 基于贝叶斯算法实现简单的分类(java)
参考文章:https://blog.csdn.net/qq_32690999/article/details/78737393 项目代码目录结构 模拟训练的数据集 核心代码 Bayes.java pa ...
- Linux filesystem
文件系统的运作与操作系统的文件数据有关.较新的操作系统的文件数据除了文件实际内容外,通常含有非常多的属性,例如Linux操作系统的文件权限(rwx)与文件属性(属主.属组.时间参数等).文件系统通常会 ...
- F#周报2019年第10期
新闻 .NET Core 3预览版3之宣告 .NET Core 3.0将在2019年下半年发布 .NET Standard 2.1的首个预览版 Docker与cgroup的内存限制 LambdAle ...
- Python 模块定义、导入、优化详解
一.定义 模块:用来从逻辑上组织 python 代码(变量,函数,类, 逻辑:实现一个功能),本质就是 .py 结尾的 python文件(例如:test.py文件,对应的模块名:test) 包:用来从 ...
- Flutter学习(一)之MaterialApp和Scaffold组件使用详解
一,前言: MaterialApp和Scaffold是Flutter提供的两个Widget,其中: MaterialApp是一个方便的Widget,它封装了应用程序实现Material Design所 ...
- Express全系列教程之(八):session的基本使用
一.关于session session是另一种记录客户状态的机制,与cookie保存在客户端浏览器不同,session保存在服务器当中:当客户端访问服务器时,服务器会生成一个session对象,对象中 ...