ion-slides广告轮播

╰+哭是因爲堅強的太久メ 2022-05-10 11:33 223阅读 0赞

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

![70][]![70 1][]

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

<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.下拉刷新 #

![70 2][]

本来有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:本来以为很简单的一个功能，前后折腾了很长时间才完成。

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

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hvdWp1bmthbmczNjM_size_16_color_FFFFFF_t_70][]![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hvdWp1bmthbmczNjM_size_16_color_FFFFFF_t_70 1][]

[70]: https://img-blog.csdn.net/20180928132004520?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hvdWp1bmthbmczNjM=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70
[70 1]: /images/20220510/f01e6f2bdbb5447fac992cd61890769d.png
[70 2]: /images/20220510/a9501db3f4ef4498affb84cb9168a4cb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hvdWp1bmthbmczNjM_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20190527083957718.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hvdWp1bmthbmczNjM=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hvdWp1bmthbmczNjM_size_16_color_FFFFFF_t_70 1]: /images/20220510/67e8b5fc04834795a0c7141e5b2a996b.png