首先说说需求 1.自动轮播 2.循环 3.点击图片跳转到相应地址 4.下拉刷新更新广告数据

当广告数据是本地数据时，什么问题都没有。当数据从服务器获取时，就会有一大堆坑了。

<ion-slides #slide1 pager *ngIf="advs!=null&&advs.length>0" loop autoplay="2000" (click)="gotoAd()">

<ion-slide *ngFor="let item of advs">

</ion-slide>

</ion-slides>

1.开启自动轮播

以为设置autoplay="2000"后就万事大吉了，万万没想到切换到其他页面后再回来就停止了。

解决代码如下：

ionViewDidEnter(){

this.startPlay();

}

startPlay(){

if(this.advs && this.advs.length > 0){

setTimeout(() => {

if(this.slide1!=null){

this.slide1.autoplayDisableOnInteraction=false;

this.slide1.startAutoplay();

}

}, 1000);

}

ionViewDidLeave(){

if (this.slide1 != null) {

this.slide1.stopAutoplay();

}

说明：1)在页面每次进入时手动开启自动轮播，页面每次离开时要停止轮播，不停止则不会生效。

2)必要的非空判断，否则会报错。advs是从服务器请求到的广告数据。

3)为什么要延迟1秒才开启？因为此时slide1可能还没有初始化，会报错。slide1使用@ViewChild的方式声明。

4)autoplayDisableOnInteraction=false，防止触摸再松开时轮播停止。

2.开启循环

ion-slides上设置loop即可

3.点击跳转

这还不简单？this.slide1.getActiveIndex()获取下标，再通过下标去获取当前广告数据不就行了？

结果跳转时页面崩溃了，明明只有两个广告，下标应该是0和1，结果蹦出了一个2。

这就是开启了循环导致的。slides是基于swiper做的，开启循环时会复制前面的元素，不开启循环则不会有此问题

那么问题来了，下标究竟如何获取？

let index=this.slide1._slides[this.slide1.clickedIndex].getAttribute('data-swiper-slide-index');//获取真正的index

你问我是怎么找到的？在github上一个个查的。。。

4.下拉刷新

本来有2个广告，后台配置成3个广告，下拉刷新，发现还是2个广告？

百思不得其解，偶然一次在获取数据前把advs置空就好了。。。

就在此时，手动触摸广告后轮播又停止了。我不是设置了autoplayDisableOnInteraction吗？

原来获取数据后还要调用startPlay()

获取数据代码：

getAdv() {

this.advs=[];

let param = { "advPositionCode": "index_advert" };

let path = "/configInfo/advert";

this.net.httpPost(path

, param

, result => {

if (result != null && result.advList != null && result.advList.length > 0) {

this.advs = result.advList;

}

this.startPlay();

},()=>{

});

}

ps:本来以为很简单的一个功能，前后折腾了很长时间才完成。

不知道网上的那些十几行代码就能解决所有问题的小伙伴是怎么做到的，难道都是本地数据？

如果内容对您有帮助，请打赏我吧，您的支持是我更新的最大动力！

ion-slides广告轮播相关推荐

安卓开发笔记——自定义广告轮播Banner（实现无限循环）
关于广告轮播,大家肯定不会陌生,它在现手机市场各大APP出现的频率极高,它的优点在于"不占屏",可以仅用小小的固定空位来展示几个甚至几十个广告条,而且动态效果很好,具有很好的用户& ...
android广告轮播图之匀速规律播放
之前在电商项目中用到广告轮播的效果,在app端实现广告图片的上传,然后轮播图片,使用handler发送消息然后在handlemessage中在发消息的循环发送可以实现广告轮播效果,但是当添加图片以后, ...
jquery广告轮播插件
大家平时在项目中很多时候也用到广告轮播图,我也不例外,为了避免重复工作,自己编写了一个兼容所有浏览器的广告轮播插件,调用非常简单.(ps:可以很灵活的修改,以满足不同的需求) js代码: (funct ...
android 广告轮播图片+视频+音频
一.近期有一个需求要实现一款定制化开发的一款广告轮播视频+图片+音频的结合,来吧接下来操作起来.因为发现Viewpager 轮播的监听总会频繁调用导致体验不太好这边是使用RecyclerView+H ...
android banner指示器高度,Android 广告轮播 -ConvenientBanner 指示器大小、bottomMargin,leftMarfin的修改。...
在Android开发时,广告轮播我的项目是使用的ConvenientBanner 来实现的,效果也很好.但是有一个很严格的设计师,需要完全按照她的设计来实现,突然发现ConvenientBanner ...
广告轮播图的前后台实现
这个广告轮播系统是老师布置的前端实训的一个结课作业. 前端: 图片在广告位进行有时间性的轮播. 在两侧有前进和后退的操作. 在下面有几张轮播图的小框框,用来显示图片的进度, 点击小框框还可以立刻跳转到 ...
Android商城开发----viewPager实现广告轮播（在首页Fragment中实现）
Android商城开发----在商城首页Fragment使用viewPager实现广告轮播写在前面:本篇文章建立在创建底部导航栏之后,对商城首页进行开发.创建底部导航栏的内容请查看:Android开 ...
Android一段时间无操作之后，进入广告轮播界面，以及触摸之后停止轮播
想要的图片轮播Activity public class BannerMediaActivity extends AppCompatActivity implements View.OnClickLi ...
android Banner 广告轮播
看了几个Banner,代码量都不少,小巫这个算是比较少的了,流程也不算复杂小巫的广告轮播思路 MainActivity里从上到下 handler // 更新视图用 onCreate() //U ...
Kotlin实现Banner广告轮播功能
效果图: 实现方法: 1.在build中添加引用 (1).在头部添加 apply plugin: 'kotlin-kapt' (2).在dependencies中添加 // ...

ion-slides广告轮播