ionic3-ng4学习见闻--(轮播图完美方案)
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学习见闻--(轮播图完美方案)的更多相关文章
- JS学习笔记--轮播图效果
希望通过自己的学习收获哪怕收获一点点,进步一点点都是值得的,加油吧!!! 本章知识点:index this for if else 下边我分享下通过老师教的方式写的轮播图,基础知识实现: 1.css代 ...
- 03 uni-app框架学习:轮播图组件的使用
1.轮播图组件的使用 参照官方文档 2.在页面上加入这个组件 3.在页面中引去css样式 并编写样式 ps:upx单位是什么 简单来说 就相当于小程序中的rpx 是一个自适应的单位 会根据屏幕宽度自动 ...
- HTML学习之轮播图
这可以说是一种非常简单的实现轮播图的方法了,由于时间仓促所以没写自动轮播部分.简单说一下原理吧,就是把所有图片堆叠在一个盒子里,设置所有图片的透明度为0,这样就把所有图片都隐藏了,第一张图片除外(第一 ...
- Web前端原生JavaScript浅谈轮播图
1.一直来说轮播图都是困扰刚进业内小白的一大难点,因为我们不仅需要自己作出一个比较完美的运动框架(虽然网上一抓一大把,但是哪有比自己做出来实现的有成就感,不是吗?^_^),还必须需要非常关键性的把握住 ...
- 用原生的javascript 实现一个无限滚动的轮播图
说一下思路:和我上一篇博客中用JQ去写的轮播图有相同点和不同点 相同点: 首先页面布局是一样的 同样是改变.inner盒子的位置去显示不同的图片 不同点: 为了实现无限滚动需要多添加两张重复的图片 左 ...
- [vuejs短文]使用vue-transition制作小小轮播图
提示 本文是个人的一点小笔记,用来记录开发中遇到的轮播图问题和vue-transition问题. 会不断学习各种轮播图添加到本文当中 也有可能会上线,方便看效果 开始制作 超简易呼吸轮播 简单粗暴的使 ...
- ionic3 slides轮播图手动滑动后无法自动播放问题
我们都知道Ionic3为我们提供了一套丰富易用的UI组件库,然而凡事是都有不完美之处,今天我们来看一下ionic3 slides组件在实现轮播功能时候的小问题. 先开UI小姐姐给到的3张美美哒效果图 ...
- ReactNative新手学习之路04 组件化开发轮播图swiper支持安卓和IOS
react native 新手之路04 组件化开发轮播图swiper支持安卓和IOS npm install react-native-carousel --save git 地址Properties ...
- 自定义完美的ViewPager 真正无限循环的轮播图
网上80%的思路关于Android轮播图无限循环都是不正确的,不是真正意义上的无限循环, 其思路大多是将ViewPager的getCount方法返回值设置为Integer.MAX_VALUE, 然后呢 ...
随机推荐
- [shiro学习笔记]第三节 使用myeclipse导入apache shiro中的QuikStart example例子
本文地址:http://blog.csdn.net/sushengmiyan/article/details/40149131 shiro官网:http://shiro.apache.org/ shi ...
- Servlet概述-servlet学习之旅(一)
Servlet概述 servlet是server+applet的缩写.applet是运行于客户端浏览器的java小程序,java诞生的时候,因为applet而闻名于世,但是现在已经没有多少热使用了,而 ...
- android之.9.png详解
.9.PNG是安卓开发里面的一种特殊的图片,这种格式的图片通过ADT自带的编辑工具生成,使用九宫格切分的方法,使图片支持在android 环境下的自适应展示. PNG,是一种非失真性压缩位图图形文件格 ...
- 手动开发动态资源之servlet初步
1.1 静态资源和动态资源的区别 静态资源:当用户多次访问这个资源,资源的源代码永远不会改变的资源. 动态资源:当用户多次访问这个资源,资源的源代码可能会发送改变. 1.2动态资源的开发技术 Serv ...
- 今日成为CSDN认证专家
认证时写的申请材料: 程序猿一枚毕业于南开工作于上海.喜欢读书,喜欢跑步,激情似火,心静如水. 喜欢编程,喜欢寻根问底各种技术,喜欢在各种新技术中汲取营养. 喜欢分享,因此以一些高质量的博文来回报各位 ...
- Chapter 2 User Authentication, Authorization, and Security(3):保护服务器避免暴力攻击
原文出处:http://blog.csdn.net/dba_huangzj/article/details/38756693,专题目录:http://blog.csdn.net/dba_huangzj ...
- 【UI 设计】PhotoShop基础工具 -- 移动工具
还是学点美工的东西吧, 业余爱好 比学编程还难 PS版本 : PhotoShop CS6 1. 移动工具 (1) 工具栏和属性栏 工具栏 和 属性栏 : 左侧的是工具栏, 每选中一个工具, 在菜单 ...
- 【一天一道LeetCode】#61. Rotate List
一天一道LeetCode系列 (一)题目 Given a list, rotate the list to the right by k places, where k is non-negative ...
- OC语言大总结(上)
根据OC学习的知识点,总结了一下,希望能帮到大家! 作者:韩俊强 未经允许,请勿转载! 关注博主:http://weibo.com/hanjunqiang 第一节类于对象 类与对象http:// ...
- iOS屏幕适配-iOS笔记
学习目标 1.[了解]屏幕适配的发展史 2.[了解]autoResizing基本用法 3.[掌握]autoLayout 的基本用法 4.[掌握]autoLayout代码实现 5.[理解]sizeCla ...