zoukankan      html  css  js  c++  java
  • 关于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,阿里妈妈图标库专用标记哦

  • 相关阅读:
    理解SQL SERVER中非聚集索引的覆盖,连接,交叉和过滤
    TSQL查询进阶流程控制语句
    效率最高的Excel数据导入(c#调用SSIS Package将数据库数据导入到Excel文件中【附源代码下载】)
    SQL Service自定义数据类型
    理解SQL SERVER中的逻辑读,预读和物理读
    TSQL查询进阶深入理解子查询
    SQL查询入门(下篇)
    使用SQL进行递归查询
    利用 sys.sysprocesses 检查 Sql Server的阻塞和死锁
    灵活运用 SQL SERVER FOR XML PATH
  • 原文地址:https://www.cnblogs.com/tanxu/p/5517940.html
Copyright © 2011-2022 走看看