angular4 使用swiper 首次加载问题(一)

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

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

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

后来就开始找解决方案

我目前采用的是 先  cnpm install swiper

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

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

以上是第一种方法。

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

首先建立一个js文件。

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

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

时间: 2024-08-02 04:43:23

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

关于验证码的首次加载失效问题

验证码首次加载失效问题相信很多人都遇到过.不论是从百度还是谷歌上去搜索,都会看到许多人抱怨这个问题.在亲身经历了验证码失效的投诉之后,我也在思考这个问题. 原因方面目前还不清楚,但是我想到了一个解决办法,并且这个办法目前没有再出现过问题. 在输入用户名或密码的第一个字符的时候,使用Ajax异步请求一次验证码,这样子就能模拟用户手动刷新的行为,从而解决第一次加载的验证码通不过的问题.

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

1:行改变的颜色正确的颜色: 2:结果首次加载第一行颜色为: 3:解决方案:Views-->OptionsSelection -->EnableAppearancehideSelection=False

React Native 首次加载白屏优化

RN首次加载都会有个白屏过程,一般都会有500ms+的白屏时间,原生页面开发同样的页面会能够快速显示而在RN页面中有个明显的等待过程,这个会影响用户体验. 1.使用过度页面 简单处理可以在白屏过程中加个过度页面,通过设置RCTRootView的loadingView添加默认的加载过程 /** * A view to display while the JavaScript is loading, so users aren't presented * with a blank screen. B

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

最近在做Android市场的应用.看到好多市场类的QQ应用宝做的算是最完美的了.在项目中要实现它的下载管理的实现,而界面如下: 反编译得到使用的是ExpandableListView.而怎么首次加载全部展开,而不能点击收缩呢? 1.首次加载全部展开: mDownloadListView.setAdapter(mDownloadAdapter); for (int i = 0; i < downloadGroup.size(); i++) { mDownloadListView.expandGro

iview库修改table组件首次加载样式错乱

因为UI设计稿这边与我们使用的iview库中的表格组件样式不统一,所以需要对表格组件的样式进行修改. 修改完成后出现一个问题就是首次进入页面的时候,表格样式会有部分是错乱的,页面刷新一下就恢复正常了,页面也没有报错甚至没有警告. 排查很久发现我对其中一个内边距设置为0造成的,代码如此下: 将这个padding注掉就不会出现首次加载样式错乱了 原文地址:https://www.cnblogs.com/sixrookie/p/10953682.html

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

# vue 首次加载缓慢/刷新后加载缓慢 原因及解决方案 最近做项目发现一个问题,页面每次刷新后加载速度都非常慢,20s左右,在开发环境则非常流畅,几乎感觉不到,本文参考望山的各种方案优化 1,关闭打包时生成的map文件 在config/index.js文件中讲productionSourceMap设置为false,再次打包便没有了map文件 2,vue-router路由懒加载 懒加载的实现方式有很多种,这里简单说三种实现方法 vue异步组件 import() webpack的require.e

从快速的首次加载开始

Progressive Web Apps 应该能够快速启动并且立即可用.目前,我们的天气应用能够快速启动,但是还不能使用,因为还没有数据.我们能够发起一个 AJAX 请求来获取数据,但是额外的请求会让初次加载时间变长.取而代之的方法是,在初次加载时提供真实的数据. 插入天气预报信息 在本实例中,我们将会静态地插入天气预报信息,但是在一个投入生产环境的应用中,最新的天气预报数据会由服务器根据用户的 IP 位置信息插入. 这代码已经包括了所需的资料,那就是我们在前个步骤所用的 initialWeat

jqGrid subGrid配置 如何首次加载动态展开所有的子表格

有时候需求需要默认加载表格的时候把子表格的数据也显示出来,经过研究相关SubGrids API配置如下: 属性 类型 描述 默认值 subGrid boolean 设置为true启用子表格.如果启用子表格,在父表格的左边会添加附加的列.此列包含一个“加”图片表示用户可以点击它展开行,默认所有行的子表格是收缩的. false subGridOptions object 子表格的配置,下面为配置的默认值 -收缩JavaScript代码 {plusicon : "ui-icon-plus",

解决手淘lib-flexible.js在移动端首次加载页面页面先放大后正常问题

例如这样 然后这样 出现这样的原因一般是   静态的,即html里有一些静态的(即非js动态添加的) 如果在页面加载完成后,页面是用js动态添加的,这个问题就不太明显, doc.addEventListener('DOMContentLoaded', function(e) { doc.body.style.fontSize = 12 * dpr + 'px'; }, false); 这段代码是起主要作用的,但是这段代码是在页面初始化完毕才执行的(即把把其他引用的js文件下载好,并且里面的函数都