关于ionic中几个问题

第一、每个页面的独立样式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中几个问题

最新文章

热门文章