在ionic2中集成swiper插件

1. 下载官方的js和css文件分别放在assets下的js和css文件夹，然后在index.html中引入

<!DOCTYPE html>
<html lang="en" dir="ltr"><head>...<link href="assets/css/swiper-4.1.6.min.css" rel="stylesheet">...
</head><body>...<script src="assets\js\swiper-4.1.6.min.js"></script>
</body></html>

2. home.html

<ion-header><ion-navbar><ion-title>Ionic Blank</ion-title></ion-navbar>
</ion-header><ion-content padding><div class="swiper-container"><div class="swiper-wrapper"><div class="swiper-slide">Slide 1</div><div class="swiper-slide">Slide 2</div><div class="swiper-slide">Slide 3</div></div></div>
</ion-content>

3. home.ts

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
declare let Swiper: any;@Component({selector: 'page-home',templateUrl: 'home.html'
})
export class HomePage {constructor(public navCtrl: NavController) {}ionViewDidLoad() {var mySwiper = new Swiper('.swiper-container', {direction: 'vertical',loop: true});}
}

4. home.scss

page-home {.swiper-container {width: 600px;height: 300px;}
}

哦了~

转载于:https://www.cnblogs.com/ImaY/p/8627407.html

在ionic2中集成swiper插件相关推荐

Ionic2中集成第三方控件Sweetalert
Ionic2混合开发,入坑系列:Ionic2中集成第三方控件Sweetalert 注:Sweetalert2已经可以直接从npm中下载安装 npm install --save sweetalert2 ...
vue导入swiper_vue项目中导入swiper插件的方法
这篇文章主要为大家详细介绍了vue项目中导入swiper插件的方法,具有一定的参考价值,可以用来参考一下. 感兴趣的小伙伴,下面一起跟随512笔记的小编两巴掌来看看吧! 版本选择 swiper是个常用 ...
Vue中引入swiper插件报错：To install it, you can run: npm install --save swiper/css/swiper.css
Vue中引入swiper插件报错:To install it, you can run: npm install --save swiper/css/swiper.css 今天在写项目的时候用到了Sw ...
在IDEA中集成Jenkins插件解决Missing or bad crumb data异常
在IDEA中集成Jenkins插件由于项目组中使用jenkins作为持续集成工具,之前一直用web方式进行访问,感觉效率比较低下,所以想通过安装官方插件,直接在IDE上直接出触发Jenkins服务器 ...
解决vue中使用swiper插件——李帅醒博客
解决vue中使用swiper插件,在引入swiper插件后,发现无法正常运行这次我们模拟从后台取下数据,然后数据绑定在swiper标签中. <template><div class ...
Jenkins中集成NodeJS插件问题对应
在Jenkins的镜像中集成NodeJS插件,发现node和npm都无法执行,最终确认之后定位为libc的问题,在这篇文章中进行memo.中介来说,这个问题还可以描述为:如何在Alpine镜像中支持N ...
实战：vue项目中导入swiper插件
版本选择 swiper是个常用的插件,现在已经迭代到了第四代:swiper4. 常用的版本是swiper3和swiper4,我选择的是swiper3. 安装安装swiper3的最新版本3.4.2: ...
2021-11-29 vue移动端卖座电影项目(三) vue项目中使用Swiper插件,Film页面设置轮拨图,nowPlaying页面设置样式
文章目录 1.引入swiper.vue组件目的步骤结果 2.把swiper-slide做成匿名插槽 3.Film.vue中通过axios请求获取后台轮播图片目的步骤因为现在原网站已取消轮拨 ...
在html中使用swiper插件实现轮播图效果
最近在对公司官网改版2.0,之前的没有后台都是静态页面那么官网逃不开的肯定是轮播图啦~ 当然我一开始是自己写的,发现写到一半很麻烦,首先从最后一张像环路一样到第一张:其次不仅是点击,还要触摸滑动,这 ...

在ionic2中集成swiper插件

在ionic2中集成swiper插件相关推荐

最新文章

热门文章