ionic 简单的使用

最新推荐文章于 2024-09-07 09:14:51 发布

原创最新推荐文章于 2024-09-07 09:14:51 发布 · 148 阅读

0 ·

CC 4.0 BY-SA版权

//先导入bundle包不能再导入angular包了不然会报错

//简单的一个小案例

//设置一个标题
<!--<div class="bar bar-header bar-positive" >

<h1 class="title">bar-light</h1>

</div>-->
  <ion-header-bar class="bar-positive">
   <h1 class = "title">头部</h1>
  </ion-header-bar>
  <!--

内容

-->
  <ion-content>
   <ul class="list">
    <li class="item">张三</li>
    <li class="item">张三</li>
    <li class="item">张三</li>
    <li class="item">张三</li>
   </ul>
   <input class="button button-balanced" type="button" value="按钮"/>
  </ion-content>
  <!--

底部

-->

//设置底部
  <ion-footer-bar class="bar-assertive">
   <h1 class="title">我是底部</h1>
  </ion-footer-bar>
  
  <script type="text/javascript">
   var mo = angular.module("myApp", ["ionic"]);
   mo.controller("myCtrl", function($scope) {

   })
  </script>
  
</body>