angular 在使用外部插件swiper 还是有不少小坑的,下面来聊一聊。angular在使用swiper 的一些坑

一开始觉得使用外部引入的方式比较好,就在外部定义了。简单快捷方便,

但是在开发后期,发现会出现这样的bug (首次加载swiper 不起作用,只有在二次刷新的时候,才能发挥作用。)深入研究发现,这个主要是angular的一个运行机制问题。

后来就开始找解决方案

我目前采用的是 先  cnpm install swiper

然后在需要引入的页面应用  import * as swiper from Swiper

之后再当前生命周期,初始化的时候,初始化这个swiper 就解决这个问题了。

以上是第一种方法。

还有另外的方案(是同事弄的)

首先建立一个js文件。

将需要初始化的swiper函数放在js文件中。

然后用require的方式,放在初始化函数当中。如果能够直接调用require的话,就直接调用,如果不能的话,就需要在函数什么require 方法。

angular4 使用swiper 首次加载问题(一)的更多相关文章

  1. mvc中多参数URL会很长,首次加载不传参数让url很短,路由规则实现方法[bubuko.com]

    如要实现列表中地址全路径“bubuko-11-2.html”,在首次进入时,使用短路径“bubuko.html”,只有再次href后才显示全路径“bubuko-11-2.html”,下面使用路由规则来 ...

  2. RequireJS首次加载偶尔失败

    现象:第一次加载JS文件,首次加载偶尔失败: 原因:require(['jquery', 'operamasks', 'zTree', 'jQueryCookie'],中前后引用同步加载: 解决方式: ...

  3. vue项目首次加载过慢

    vue项目优化 浅谈 Vue 项目优化 关于vue在app首次加载缓慢的解决办法 nginx开启缓存 在http部分加入 #要想开启nginx的缓存功能,需要添加此处的两行内容! #设置Web缓存区名 ...

  4. web页面判断是否首次加载

    判断web页面是否是首次加载: if(!window.name){ window.name ='name' this.setState({ note:true })}

  5. React Native 首次加载白屏优化

    RN首次加载都会有个白屏过程,一般都会有500ms+的白屏时间,原生页面开发同样的页面会能够快速显示而在RN页面中有个明显的等待过程,这个会影响用户体验. 1.使用过渡页面 简单处理可以在白屏过程中加 ...

  6. 首次加载进来DEV控件列表第一行颜色总是不对,后台代码显示的数据正确

    1:行改变的颜色正确的颜色: 1.1颜色效果如下图: 1.2:设置行改变颜色: 2:结果首次加载第一行颜色为: 3:解决方案: 3.1 :Views-->OptionsSelection --& ...

  7. C# 后台首次加载时才执行

    protected void Page_Load(object sender, EventArgs e) { if (!IsPostBack) { } } 写在 if (!IsPostBack) { ...

  8. ExpandableListView的首次加载全部展开,并且点击Group不收缩、

    最近在做Android市场的应用.看到好多市场类的QQ应用宝做的算是最完美的了.在项目中要实现它的下载管理的实现,而界面如下: 反编译得到使用的是ExpandableListView.而怎么首次加载全 ...

  9. vue 首次加载缓慢/刷新后加载缓慢 原因及解决方案

    # vue 首次加载缓慢/刷新后加载缓慢 原因及解决方案 最近做项目发现一个问题,页面每次刷新后加载速度都非常慢,20s左右,在开发环境则非常流畅,几乎感觉不到,本文参考望山的各种方案优化 1,关闭打 ...

随机推荐

  1. 【欧拉回路+最小生成树】SD开车@山东2018省队一轮集训day1

    目录 [欧拉回路+最小生成树]SD开车@山东2018省队一轮集训day1 PROBLEM 题目描述 输入 输出 样例输入 样例输出 提示 SOLUTION CODE [欧拉回路+最小生成树]SD开车@ ...

  2. GMA Round 1 最短距离

    传送门 最短距离 在椭圆C:$\frac{x^2}{20^2}+\frac{y^2}{18^2}=1$上作两条相互垂直的切线,切线交点为P,求P到椭圆C的最短距离.结果保留6位小数. 设椭圆方程:$\ ...

  3. export和export default

    在  vue中 export  变量名不能识别,只能export default 变量,import 随便取名,不需要{}

  4. c语言,以单词为单位逆序字符串

    #include "string.h" #include "stdio.h" char * nixu(char *c) { ; int n = strlen(c ...

  5. java.util中,util是什么意思

    Util是utiliy的缩写,是一个多功能.基于工具的包. java.util是包含集合框架.遗留的 collection 类.事件模型.日期和时间设施.国际化和各种实用工具类(字符串标记生成器.随机 ...

  6. type显示的是访问类型,是较为重要的一个指标,结果值从好到坏依次是: system > const > eq_ref > ref > fulltext > ref_or_null > index_merge > unique_subquery > index_subquery > range > index > ALL ,一般来说,得保证查询至少达到range级别,最好能达到ref。 作者:高

    MySQL EXPLAIN详解 - 简书 https://www.jianshu.com/p/ea3fc71fdc45 type显示的是访问类型,是较为重要的一个指标,结果值从好到坏依次是: syst ...

  7. 文本不能被选中的css

    -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none;

  8. Head First Python-python面向对象

    与大多数其他的编程语言一样,Python容许创建并定义面向对象的类,类可以将代码与代码处理的数据相关联. 对于更加复杂的数据,一般的列表已经不能满足需求了. 我们可以使用字典dict将数据值与键相关联 ...

  9. 42028: Assignment 1 – Autumn 2019

    42028: Assignment 1 – Autumn 2019 Page 1 of 4Faculty of Engineering and Information TechnologySchool ...

  10. JavaScript中的this所引用的对象和如何改变这个引用

    this是函数内部的一个特殊对象,它引用的是函数执行环境对象.也就是运行是基于函数的执行环境绑定. 1.在网页全局作用域中调用函数时,this引用window var color='black'; f ...