因为app的更新迭代 我须要完成新版本设计图的开发css
刚开始就遇到一个问题 首页的banner图须要实现某种效果 而ionic3自带的轮播图效果怎么改都改不到我想要的效果html
效果图以下 自动播放 不断轮播web
因此我就用平时用的swiper插件找找有没有相似的 还真找到一个 连接 http://www.swiper.com.cn/demo/110-slides-per-view.htmlapp
不过在使用过程当中仍是遇到一些问题 下面会说到ionic
<link rel="stylesheet" type="text/css" href="assets/css/swiper.min.css"> <script src="assets/js/swiper.min.js"></script>
import { Component, ViewChild } from '@angular/core'; import { IonicPage, NavController, NavParams } from 'ionic-angular'; declare let Swiper:any;
注意事项:slidesPerView 这个属性的值能够调成小数点 1.2 这样才和设计图的效果同样ide
可是有个问题 当它的值未小数的时候而且循环轮播 第二次开始日后播放的时候 第二张图片不会显示就是尚未放到右边那个位置(这是我研究它的代码发现的一个bug) 可是它仍是会滚动 滚动后会显示 详情见下图oop
这个问题我用另外一种方法解决了 slidesPerView的值改成了2 还用css样式修改了一下 视觉上是同样并且也没有上面的问题 详情看下面cssflex
ionViewDidLoad() { var swiper = new Swiper('.swiper-container', { autoplay: { delay: 2500, disableOnInteraction: false, }, slidesPerView: 2, spaceBetween: 10, centeredSlides: true, loop: true, pagination: { el: '.swiper-pagination', clickable: true, }, }); }
<div class="banner"> <div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide"><img src="assets/images/positions/banner.png"></div> <div class="swiper-slide"><img src="assets/images/positions/banner2.png"></div> <div class="swiper-slide"><img src="assets/images/positions/banner3.png"></div> </div> <div class="swiper-pagination"></div> </div> </div>
注意事项:上面slidesPerView值改成2 以后 左右两边是下面图片中的效果 左右两边太大了 占百分比太多flexbox
因此我外面包了一个类名为banner的div 把它的宽调大 而后居中 多余出来的被父元素overflow:hidden 因此和设计图效果彻底同样了 也没有Bug了 完美解决!!!spa
// banner图 .banner { width: 180%; height: auto; margin-left: -40%; margin-top: 14px; } .banner img { width: 100%; display: block; } .swiper-slide { text-align: center; font-size: 18px; /* 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; } .swiper-pagination-bullet-active { background: #ff8503; } .swiper-slide img { width: 100%; border-radius: 15px!important; }
而后 这个难题就攻克了 有遇到相似问题的 能够试试 另外想在ionic3中引用外部插件的 也能够用这种方法