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. Egret的Shape

    class ShapeTest extends egret.DisplayObjectContainer { public constructor() { super(); this.addEvent ...

  2. day13_H5_CSS_1

    一.标签.HTML是可以被浏览器解析的一套规则 1.a标签:他是主动闭合标签,表现形式<a href="http://www.baidu.com">baidu<a ...

  3. angular.formJson()

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  4. JS-对象的数据重复

    <title>01-对象中数据的重复</title> <script type="text/javascript"> var arr = []; ...

  5. js取整数、取余数

    js取整数.取余数 取整 1.取整 // 丢弃小数部分,保留整数部分 parseInt(5/2) // 2 2.向上取整 // 向上取整,有小数就整数部分加1 Math.ceil(5/2) // 3 ...

  6. 香茅油:不只是驱虫剂 new

    如果您是芳香疗法的爱好者,香茅油对您来说可能并不陌生.香茅油还经常被添加到各种个人护理和清洁产品中,给人们带来多种益处. 什么是香茅油? 香茅精油是从香茅属 (Cymbopogon ) 植物家族中提取 ...

  7. ffmpeg 多个音频合并 截取 拆分

    1 多个mp3文件合并成一个mp3文件 一种方法是连接到一起 ffmpeg64.exe -i "concat:123.mp3|124.mp3" -acodec copy outpu ...

  8. 2018-2019-2 网络对抗技术 20165236 Exp2 后门原理与实践

    2018-2019-2 网络对抗技术 20165236 Exp2 后门原理与实践 一.实验内容 (3.5分) (1)使用netcat获取主机操作Shell,cron启动 (0.5分) (2)使用soc ...

  9. DAX/PowerBI系列 - 查询参数用法详解(Query Parameter)

    PowerBI  - 查询参数用法详解(Query Parameter) 很多人都不知道查询参数用来干啥,下面总结一下日常项目中常用的几个查询参数的地方.(本人不太欢hardcode的东西) 使用查询 ...

  10. Python 多线程和线程池

    一,前言 进程:是程序,资源集合,进程控制块组成,是最小的资源单位 特点:就对Python而言,可以实现真正的并行效果 缺点:进程切换很容易消耗cpu资源,进程之间的通信相对线程来说比较麻烦 线程:是 ...