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页面

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

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

原文地址:https://www.cnblogs.com/zwhblog/p/8986551.html

时间: 2024-10-28 16:22:36

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

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

希望通过自己的学习收获哪怕收获一点点,进步一点点都是值得的,加油吧!!! 本章知识点:index this for if else 下边我分享下通过老师教的方式写的轮播图,基础知识实现: 1.css代码 <style> ul, ol { padding:0; margin:0; } li { list-style:none; } #box { width:600px; height:350px; border:10px solid #ccc; margin:0 auto; position:r

web前端学习之轮播图实现(原生js)

很久前接触过html css js 但自己在工作中用的少,简单的需求直接vue 走起,没有静下心好好写点js css 什么的,现在想要好好学习下 大前端的知识了,第一个小练习,做了个轮播图 网上有很多轮播图的实现过程,每个人都有自己不一样的思路,自己只要实现了就行.当然有些思路确实比我的要好,后续借鉴学习. 逻辑:将要展示的图片全部放在盒子里,超出部分隐藏,然后设置定时器,没两秒循环一次 img 标签,如果display 为block 就将 display 设置为none  那么后面的图片就到当

js学习总结----轮播图之渐隐渐现版

具体代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{ margin:0; padding:0; font-size:14px; -webkit-user-select:none; } ul,li{ list-style } im

js学习总结----轮播图的插件化封装

具体代码如下: ~function(){ function AutoBanner(curEleId,ajaxURL,interval){ //把之前存储获取元素的变量都作为当前实例的私有属性 this.banner = document.getElementById(curEleId); this.bannerInner = utils.firstChild(this.banner); this.bannerTip = utils.children(this.banner,"ul")[

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

说一下思路:和我上一篇博客中用JQ去写的轮播图有相同点和不同点 相同点: 首先页面布局是一样的 同样是改变.inner盒子的位置去显示不同的图片 不同点: 为了实现无限滚动需要多添加两张重复的图片 左右切换和前面的方法有所不同,前面是获取当前的索引值乘以-600px当做位移距离,现在是需要获取当前.inner的位置来加上或者减去-600来实现 下面来一步步的去实现轮播图: 首先是html <!DOCTYPE html> <html lang="en"> <

Web前端原生JavaScript浅谈轮播图

1.一直来说轮播图都是困扰刚进业内小白的一大难点,因为我们不仅需要自己作出一个比较完美的运动框架(虽然网上一抓一大把,但是哪有比自己做出来实现的有成就感,不是吗?^_^),还必须需要非常关键性的把握住轮播的原理,这样才能把一个轮播图完美的呈现出来. 2.废话不多说,请看下面代码 1 //首先我们必须都明确,一个好的运动框架那必须是能够同时承载两种或多种以上需求的,所以我们应该避免单运动框架通过行内样式的局限性,就需要我们知道怎么去获取非行间样式 2 function getStyle(obj,a

vue移动音乐app开发学习(三):轮播图组件的开发

本系列文章是为了记录学习中的知识点,便于后期自己观看.如果有需要的同学请登录慕课网,找到Vue 2.0 高级实战-开发移动端音乐WebApp进行观看,传送门. 完成后的页面状态以及项目结构如下: 一:创建轮播图组件slider.vue 1:在src/base下新建base文件夹,然后创建silder.vue: <template> <div class="slider" ref="slider"> <div class="sl

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

网上80%的思路关于Android轮播图无限循环都是不正确的,不是真正意义上的无限循环, 其思路大多是将ViewPager的getCount方法返回值设置为Integer.MAX_VALUE, 然后呢将ViewPager的当前展示页设置为第1000页或者是10000页,这样用户一般情况下是滑不到边界的 例如有5张图片的轮播图,item的编号为(0,1,2,3,4)当前页的页号如果是5, 这时候就将编号设置为0,即 actPosition %= datas.size();这个公式就是这么来的 这种

解决ionic2/ionic3轮播图切换页面或者点击过后不自动轮图

我们在ionic2/ionic3开发的过程中会出现切换页面或者滑动切换轮播图出现轮播图不再轮播的情况,这其实需要一些配置. 首先在运用到轮播图的component中引入 import {ViewChild } from '@angular/core'; import { Slides } from 'ionic-angular'; 然后 @ViewChild(Slides) slides: Slides; //解决切换其他页面回去轮播图不动问题 ionViewWillEnter(){ this.