ionic上 轮播图是最坑的插件了吧,各种bug和 问题。

事件也不好用。。

于是,我终于搞出来了一个完美的方案,

适用于,动态获取轮播图数据,自动循环播放,跳转其他页面回来后自动播放,手指触摸后自动播放。

至于有什么问题,还要大家多去试试,话不多说,开搞。

1.在使用轮播图的 page页面 ts文件中

import { Slides } from 'ionic-angular';
import { ViewChild } from '@angular/core';

在class下面添加

@ViewChild(Slides) slides: Slides;
autoPlay() {
this.slides.startAutoplay();
} swipeEvent(e){
this.autoPlay();
} ionViewWillLeave() {
this.slides.stopAutoplay();
}

在 获取轮播图数据后,新增

this.autoPlay();

2.在page页面

 <ion-slides #slides pager loop="true" autoplay="2000" autoplayDisableOnInteraction="false" *ngIf='carouselImgList.length>0'
(swipe)="swipeEvent($event)">
<ion-slide *ngFor="let carouselImg of carouselImgList" (click)="goCarouselDetail(carouselImg)">
<img src="{{carouselImg.imgUrl}}" class="slide-image">
</ion-slide>
</ion-slides>

这样就可以了,试试后如果有问题可以给我反馈。

ionic3-ng4学习见闻--(轮播图完美方案)的更多相关文章

  1. JS学习笔记--轮播图效果

    希望通过自己的学习收获哪怕收获一点点,进步一点点都是值得的,加油吧!!! 本章知识点:index this for if else 下边我分享下通过老师教的方式写的轮播图,基础知识实现: 1.css代 ...

  2. 03 uni-app框架学习:轮播图组件的使用

    1.轮播图组件的使用 参照官方文档 2.在页面上加入这个组件 3.在页面中引去css样式 并编写样式 ps:upx单位是什么 简单来说 就相当于小程序中的rpx 是一个自适应的单位 会根据屏幕宽度自动 ...

  3. HTML学习之轮播图

    这可以说是一种非常简单的实现轮播图的方法了,由于时间仓促所以没写自动轮播部分.简单说一下原理吧,就是把所有图片堆叠在一个盒子里,设置所有图片的透明度为0,这样就把所有图片都隐藏了,第一张图片除外(第一 ...

  4. Web前端原生JavaScript浅谈轮播图

    1.一直来说轮播图都是困扰刚进业内小白的一大难点,因为我们不仅需要自己作出一个比较完美的运动框架(虽然网上一抓一大把,但是哪有比自己做出来实现的有成就感,不是吗?^_^),还必须需要非常关键性的把握住 ...

  5. 用原生的javascript 实现一个无限滚动的轮播图

    说一下思路:和我上一篇博客中用JQ去写的轮播图有相同点和不同点 相同点: 首先页面布局是一样的 同样是改变.inner盒子的位置去显示不同的图片 不同点: 为了实现无限滚动需要多添加两张重复的图片 左 ...

  6. [vuejs短文]使用vue-transition制作小小轮播图

    提示 本文是个人的一点小笔记,用来记录开发中遇到的轮播图问题和vue-transition问题. 会不断学习各种轮播图添加到本文当中 也有可能会上线,方便看效果 开始制作 超简易呼吸轮播 简单粗暴的使 ...

  7. ionic3 slides轮播图手动滑动后无法自动播放问题

    我们都知道Ionic3为我们提供了一套丰富易用的UI组件库,然而凡事是都有不完美之处,今天我们来看一下ionic3 slides组件在实现轮播功能时候的小问题. 先开UI小姐姐给到的3张美美哒效果图 ...

  8. ReactNative新手学习之路04 组件化开发轮播图swiper支持安卓和IOS

    react native 新手之路04 组件化开发轮播图swiper支持安卓和IOS npm install react-native-carousel --save git 地址Properties ...

  9. 自定义完美的ViewPager 真正无限循环的轮播图

    网上80%的思路关于Android轮播图无限循环都是不正确的,不是真正意义上的无限循环, 其思路大多是将ViewPager的getCount方法返回值设置为Integer.MAX_VALUE, 然后呢 ...

随机推荐

  1. bash与ksh数组使用

    区别: bash与ksh在数组的使用中,最大的不同在于数组的定义. bash: declare -a arrayname ksh:set -A arrayname 其实,数组不用非要定义,在赋值的时候 ...

  2. Java基础----Java---集合框架---泛型、泛型方法、静态方法泛型、泛型接口、泛型限定、泛型类

    泛型:jdk1.5后的新特性,用于解决安全问题,是一个安全机制. 好处: 1.将运行时的异常出现问题classcastException.转移到了编译时期.方便程序员调试解决问题,让运行事情问题减少, ...

  3. 简单RPC之Socket实现

    最近看到Dubbo大神写得使用Socket实现的简单的RPC调用,对RPC的理解更简单了,然后根据大神的代码自己也重构了一下. RPC Server端代码,主要是使用ServerSocket获得rpc ...

  4. SpriteBuilder中使用GUI界面快速搭建RPG游戏中的地图名显示动画

    大熊猫猪·侯佩原创或翻译作品.欢迎转载,转载请注明出处. 如果觉得写的不好请告诉我,如果觉得不错请多多支持点赞.谢谢! hopy ;) 在RPG游戏中我们在进入一个新的场景时,比如一个房间,一个村庄, ...

  5. web中间件切换(was切tomcat)

    一.数据源迁移: ①数据源配置在web容器还是在项目本身? 根据开发与生产分离原则选择配置到web容器,以免开发泄露数据库密码. ②数据库密码加密 原先was的数据源直接在console控制,密码是密 ...

  6. 分布式进阶(八)Linux提示Unable to locate package该如何处理?

    Linux提示Unable to locate package该如何处理? 当你在修改Linux软件源的时候,提示Unable to locate package错误,这是由什么原因导致的呢?又该如何 ...

  7. Java编写的接口测试工具

    这几天由于要频繁地使用一些天气数据接口,但是每次都要频繁的打开网页,略显繁琐,故就自己做了两个json数据获取的小工具. 第一个 先来看看第一个吧,思路是使用一个网络流的处理,将返回的json字符串数 ...

  8. 03_Android项目中读写文本文件的代码

    编写一下Android界面的项目 使用默认的Android清单文件 <?xml version="1.0" encoding="utf-8"?> & ...

  9. OC第二天—封装

    /.锁定头文件的方法 1. 打开终端 2. 进入到Xcode的目录, 命令:   cd /Applications/Xcode.app 3. 把系统头文件修改为只读, 命令:   sudo chown ...

  10. MinerDB.java 数据库工具类

    MinerDB.java 数据库工具类 package com.iteye.injavawetrust.miner; import java.sql.Connection; import java.s ...