ionic 中轮播的问题和解决方案

ⅰ亾dé卋堺 提交于 2020-04-07 12:38:47

##ionic轮播的问题解决方案

#### 首先说明了我的问题

先上 html 代码

`<ion-slide-box show-pager="true" ng-if="carouseList" on-slide-changed="slideHasChanged($index)"  class="slidebox"  auto-play="true" slide-interval="4000" delegate-handle="slideimgs" does-continue="true">

                <ion-slide ng-repeat="list in carouseList">

                    <a ng-href="{{list.url}}" target="_blank"><img ng-src="{{list.img_id}}" alt="{{list.name}}" class="other-img"></a>

                </ion-slide>

            </ion-slide-box>`

            

这段代码显示效果是没有问题的,但是我遇到的问题是:<br >

1. 加载页面后轮播显示的是最后的一张图片,而不是默认的第一张(这个就无所谓了)。

2. 加载页面后不能自动的轮播, 还的手动去滑动去触发。

3. 图片多的话会在页面显示一会儿后才能滑动(不能容忍了╭(╯^╰)╮)。

<br />

#####对于以上的问题可以有如下的解决方案

在控制器中加上下面的代码:<br />

` $timeout(function(){

        $ionicSlideBoxDelegate.$getByHandle('slideimgs').update();

        $ionicSlideBoxDelegate.$getByHandle('slideimgs').loop(true);

    } , 1000);`

延后加载后重新更新服务。


######总结一下:<br />

######对于遇到的各种问题首先想到的解决方案应该是去官网去查找,一般都会找到问题的解决方案,(不过对于我们网内的用户有可能去不了网外,你可以爬梯子),而且一般对于英文的网站都有一种困局,所以都不习惯去官网查找,种种问题都需要一步步的解决。其实上面的解决方案在官网是有的 <a href='http://ionicframework.com/docs/api/service/$ionicSlideBoxDelegate/'>http://ionicframework.com/docs/api/service/$ionicSlideBoxDelegate/</a>


易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!