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触屏滑动---心酸路
心酸历程: 积分首页的轮播图,我想做得好一点,按照小谷给的原型图,找到了很不多的实例. 但是实现的过程遇到了很多问题,同时也学到了很多! 2019-7-9: 找人弄源码,想通过上次那样,在网页上找到类 ...
手机触屏滑动图片切换插件swiper.js
今天给大家分享一款手机触屏滑动图片切换插件swiper.js是一款swiper手机触屏滑动图片幻灯片,适合各种尺寸.效果图如下: 在线预览源码下载实现的代码. html代码: <div ...
自动轮播图html代码适应手机,JS实现自动轮播图效果(自适应屏幕宽度+手机触屏滑动)...
1.本文使用js+jQuery实现轮播图,需要引用jquery包,另种实现分别是animate实现自适应的轮播,以及transform平滑轮播(在注释代码中). 2.代码中的图片大家自己更换就可以了, ...
JS 移动端触屏滑动
首页> 程序开发 > web前端 > JavaScript > 正文 JS案例之5--移动端触屏滑动 2014-08-15 0个评论收藏我要投稿移动端 ...
JS移动客户端--触屏滑动事件 banner图效果
JS移动客户端--触屏滑动事件移动端触屏滑动的效果其实就是图片轮播,在PC的页面上很好实现,绑定click和mouseover等事件来完成.但是在移动设备上,要实现这种轮播的效果,就需要用到核心的t ...
QWebEngineView 实现网页触屏滑动
问题描述: 最近遇到一个很棘手的bug,最初做需求的时候没考虑到通用,认为前端不会经常改架构,就写死了只对某个标签设置scrollbar的值,导致后面前端html架构改了之后,找不到相应的标签,触屏滑 ...
QT实现滑动切换界面，ARM/Linux触屏滑动切换界面，切换Qwidget
QT实现滑动切换界面,触屏滑动切换界面实现思想实现过程完整代码实现思想项目中要用到ARM,要求手势滑动能够切屏,首先我们想到使用 QGestureEvent,但使用起来比较麻烦,并且个人了解 ...
python手机触屏代码_JS移动客户端--触屏滑动事件及js手机拖拽效果
移动端触屏滑动的效果其实就是图片轮播,在PC的页面上很好实现,绑定click和mouseover等事件来完成.但是在移动设备上,要实现这种轮播的效果,就需要用到核心的touch事件.处理touch事件 ...
移动客户端触屏滑动事件
手机移动端触屏滑动的效果其实就是图片轮播,在PC的页面上很好实现,绑定click和mouseover等事件来完成.但是在移动设备上,要实现这种轮播的效果,就需要用到核心的touch事件.处理touch ...

ionic4中使用Swiper触屏滑动--技术

原文件

home.page.html

home.page.scss

home.modules.ts没有修改

home.page.js没有修改

home.page.spec.ts没有修改

home.page.ts

重点一，添加home.d.ts文件，这个文件是用来声明的，因为我们引入了js文件，但是ionic4并不认识js文件，以及里面的类型，所以这个要声明

重点一，修改脚手架内容

ionic4中使用Swiper触屏滑动--技术相关推荐

最新文章

热门文章