第一、每个页面的独立样式style标签不能写在ion-view外面,否则会出现路由问题,建议写在ion-content后面,例如下面的例子中,如果style但在ion-view中的话会出想路由问题,显示不了返回和标题之类的
<ion-view view-title="首页"> <ion-content class="has-header mainPage"> <div class="adver_con" ng-if="isShowAdver"> <ion-slide-box class="slideBox" auto-play="true" show-pager="false" does-continue="true" slide-interval="2000"> <ion-slide> <div class="box blue"> <img src="http://st.depositphotos.com/thumbs/1005147/image/2234/22349297/api_thumb_450.jpg" alt=""> </div> </ion-slide> <ion-slide> <div class="box yellow"> <img src="http://new-img2.ol-img.com/985x695/127/899/li0XMwHPp5I.jpg" alt=""> </div> </ion-slide> <ion-slide > <div class="box pink"> <img src="http://www.microfotos.com/pic/2/263/26335/2633596preview5.jpg" alt=""> </div> </ion-slide> </ion-slide-box> <span class="closeBtn icon ion-ios-close-outline" ng-click="closeAdverBox()"></span> </div> <ion-scroll> <iframe src="http://www.mfcclub.net" frameborder="0" class="iframeForMfc"></iframe> </ion-scroll> </ion-content> <style> .slideBox,.adver_con{ height: 80px; } .adver_con{ position: relative; } .adver_con span{ position:absolute; right: 0px; top:0px; } .slideBox img{ max-width:100%; } .iframeForMfc{ width:100%; height:640px; } .adver_con span.closeBtn{ position: absolute; right: 5px; top:5px; z-index:2; font-size:26px; color: #000; } </style> </ion-view>
第二、ion-slide-box中,官网写错api,自动轮播应该是auto-play="true"来控制,does-continue="true"控制的是否循环播放
<ion-slide-box class="slideBox" auto-play="true" show-pager="false" does-continue="true" slide-interval="2000"> <ion-slide> <div class="box blue"> <img src="http://st.depositphotos.com/thumbs/1005147/image/2234/22349297/api_thumb_450.jpg" alt=""> </div> </ion-slide> <ion-slide> <div class="box yellow"> <img src="http://new-img2.ol-img.com/985x695/127/899/li0XMwHPp5I.jpg" alt=""> </div> </ion-slide> <ion-slide > <div class="box pink"> <img src="http://www.microfotos.com/pic/2/263/26335/2633596preview5.jpg" alt=""> </div> </ion-slide> </ion-slide-box> <span class="closeBtn icon ion-ios-close-outline" ng-click="closeAdverBox()"></span> </div>
第四、使用阿里妈妈图标库作为ion-tab的图标时,在引入相关的文件之后,可以替换这里的东西
<ion-tab title="发现" icon-off="iconfont icon-comiisfaxian-copy" icon-on="iconfont icon-comiisfaxian-copy" href="#/tab/discover"> <ion-nav-view name="tab-discover"></ion-nav-view> </ion-tab>
别忘了加上iconfont,阿里妈妈图标库专用标记哦