您的位置：首页 > Web前端 > HTML

HTML__图片轮播ion-slide-box

2016-07-23 20:51 435 查看
先大概描述一下要做的界面：

从网络请求json数据，获取网络图征数据，然后轮播图片。我遇到的问题是：图片不显示，代码如下

<ion-slide-box does-continue="true" show-pager="true" auto-play="true" slide-interval="1000">
<ion-slide ng-repeat="item in homePage" >
<div class="imgLoop">
<img src="{{item.imgUrl}}" class="imgScroll"/>
</div>
</ion-slide>
</ion-slide-box>

解决办法：


<ion-slide-box does-continue="true" show-pager="true" auto-play="true" slide-interval="1000" ng-if="homePage.length>0">
<ion-slide ng-repeat="item in homePage" >
<div class="imgLoop">
<img src="{{item.imgUrl}}" class="imgScroll"/>
</div>
</ion-slide>
</ion-slide-box>


总结：主要就是加了一个判断条件 ng-if="homePage.length>0" ，大概意思就是：当数组homePage有值时，执行下标签里的内容。  如果不加ng-if  那么HTML在加载时，数组还没值 ，
所以图片不会显示。因为网络请求是异步的，当异步请求结束后数组有值了，标签里的内容才会执行。

                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航