码迷,mamicode.com
首页 > 其他好文 > 详细

关于ionic中几个问题

时间:2016-05-22 22:54:28      阅读:211      评论:0      收藏:0      [点我收藏+]

标签:

第一、每个页面的独立样式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,阿里妈妈图标库专用标记哦

 

关于ionic中几个问题

标签:

原文地址:http://www.cnblogs.com/tanxu/p/5517940.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!