2024年04月10日 懒猪 前端开发 前端博客 个人博客 网站制作 鹏仔先生 百变鹏仔 HTML CSS javascript JS 共享博客
首先,我们下载 swiper 的 js 和 css,将其放置 assets 中,在 src 下的 index.html 中引入(当然也可以直接引入 CDN )
<!--Swiper--> <link rel="stylesheet" href="./assets/css/swiper-4.4.1.min.css"> <script src="./assets/js/swiper-4.4.1.min.js"></script>
接着,我们在自己对应页面中的html放入swiper的代码,如下
<ion-header> <ion-navbar> <ion-title>懒猪</ion-title> </ion-navbar> </ion-header> <ion-content> <div class="swiper_box"> <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 class="swiper-pagination"></div> <!-- 如果需要导航按钮 --> <div class="swiper-button-prev"></div> <div class="swiper-button-next"></div> <!-- 如果需要滚动条 --> <div class="swiper-scrollbar"></div> </div> </div> </ion-content>
下来就是ts中放入js代码
import { Component } from '@angular/core'; import { IonicPage, NavController, NavParams } from 'ionic-angular'; declare let Swiper: any; @IonicPage() @Component({ selector: 'page-level-that', templateUrl: 'level-that.html', }) export class LevelThatPage { constructor(public navCtrl: NavController, public navParams: NavParams) { } ionViewDidLoad() { console.log('ionViewDidLoad LevelThatPage'); this.swiper(); } swiper(){ var mySwiper = new Swiper ('.swiper-container', { direction: 'vertical', loop: true, // 如果需要分页器 pagination: { el: '.swiper-pagination', }, // 如果需要前进后退按钮 navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev', }, // 如果需要滚动条 scrollbar: { el: '.swiper-scrollbar', }, }) } }
别忘了在 css 里面设置宽高哦!
.swiper-container { width: 100%; height: 300px; }
完成之后,页面会显示的是 try again later ,我们 ionic serve 从新启动下即可。
本文链接:http://so.lmcjl.com/news/1657/