ionic4中使用Swiper触屏滑动--技术
生活随笔
收集整理的這篇文章主要介紹了
ionic4中使用Swiper触屏滑动--技术
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
這個demo只有HTML的內容，但我要在ionic4上使用，所以就把它修改后用在ionic上！
原文件
<!DOCTYPE html>
<html lang="en">
<head><meta charset="utf-8"><title>Swiper demo</title><meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1"><!-- Link Swiper's CSS --><link rel="stylesheet" href="../dist/css/swiper.min.css"><!-- Demo styles --><style>html, body {position: relative;height: 100%;}body {background: #eee;font-family: Helvetica Neue, Helvetica, Arial, sans-serif;font-size: 14px;color:#000;margin: 0;padding: 0;}.swiper-container {width: 100%;height: 100%;}.swiper-slide {text-align: center;font-size: 18px;background: #fff;/* Center slide text vertically */display: -webkit-box;display: -ms-flexbox;display: -webkit-flex;display: flex;-webkit-box-pack: center;-ms-flex-pack: center;-webkit-justify-content: center;justify-content: center;-webkit-box-align: center;-ms-flex-align: center;-webkit-align-items: center;align-items: center;}</style>
</head>
<body><!-- Swiper --><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 class="swiper-slide">Slide 4</div><div class="swiper-slide">Slide 5</div><div class="swiper-slide">Slide 6</div><div class="swiper-slide">Slide 7</div><div class="swiper-slide">Slide 8</div><div class="swiper-slide">Slide 9</div><div class="swiper-slide">Slide 10</div></div><!-- Add Pagination --><div class="swiper-pagination"></div></div><!-- Swiper JS --><script src="../dist/js/swiper.min.js"></script><!-- Initialize Swiper --><script>var swiper = new Swiper('.swiper-container', {slidesPerView: 3,spaceBetween: 30,pagination: {el: '.swiper-pagination',clickable: true,},});</script>
</body>
</html>
在ionic4中使用時，將這個HTML文件中的引用文件都下載下來，這個文件被拆分成個文件，還要修改一些東西
這個修改后，要運行的ionic4的目錄結構
這是要添加的js文件
home.page.html
<ion-header><ion-title></ion-title>
</ion-header><ion-content><!-- Swiper --><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 class="swiper-slide">Slide 4</div><div class="swiper-slide">Slide 5</div><div class="swiper-slide">Slide 6</div><div class="swiper-slide">Slide 7</div><div class="swiper-slide">Slide 8</div><div class="swiper-slide">Slide 9</div><div class="swiper-slide">Slide 10</div></div><!-- Add Pagination --><div class="swiper-pagination"></div></div>
</ion-content>
home.page.scss
html, body {position: relative;height: 100%;}body {background: #eee;font-family: Helvetica Neue, Helvetica, Arial, sans-serif;font-size: 14px;color:#000;margin: 0;padding: 0;}.swiper-container {width: 100%;height: 100%;}.swiper-slide {text-align: center;font-size: 18px;border:#000;background: #fff;/* Center slide text vertically */display: -webkit-box;display: -ms-flexbox;display: -webkit-flex;display: flex;-webkit-box-pack: center;-ms-flex-pack: center;-webkit-justify-content: center;justify-content: center;-webkit-box-align: center;-ms-flex-align: center;-webkit-align-items: center;align-items: center;}
home.modules.ts沒有修改
home.page.js沒有修改
home.page.spec.ts沒有修改
home.page.ts
import { Component, OnInit } from '@angular/core';@Component({selector: 'app-home',templateUrl: 'home.page.html',styleUrls: ['home.page.scss'],
})
export class HomePage implements OnInit {constructor() {}ngOnInit() {var swiper = new Swiper('.swiper-container', {slidesPerView: 3,spaceBetween: 30,pagination: {el: '.swiper-pagination',clickable: true,},});require('../../../src/assets/js/jquery.min.js');require('../../../src/assets/css/swiper.min.css');require('../../../src/assets/js/swiper.min.js');}
}重點一，添加home.d.ts文件，這個文件是用來聲明的，因為我們引入了js文件，但是ionic4并不認識js文件，以及里面的類型，所以這個要聲明
/// <reference path="../../../node_modules/@types/node/index.d.ts" />
declare var Swiper: any;
declare var require: NodeRequire;
重點一，修改腳手架內容
修改的內容
總結
以上是生活随笔為你收集整理的ionic4中使用Swiper触屏滑动--技术的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： ionic4中使用Swiper触屏滑动-
- 下一篇： ionic4中实现时间线