Ionic建立側邊欄輪播圖載入動畫的方法-html教學-PHP中文網

Ionic建立側邊欄輪播圖載入動畫的方法

一个新手

發布： 2017-10-23 10:13:51

原創

6222 人瀏覽過

超好用的移動框架--Ionic

Ionic是一個輕量的手機UI庫，具有速度快，介面現代化、美觀等特色。

為了解決其他一些UI庫在手機上運行緩慢的問題，它直接放棄了IOS6和Android4.1以下的版本支持，來獲取更好的使用體驗。

（最近正在學習行動端專案製作，本文就Ionic的使用，簡單範例了學習到的一些樣式。）

1安裝ionic

#1.HBuilder建立APP項目，導入ionic的css， js（fonts）檔案。

2.導入ionic.css和ionic.bundle.js檔案。

2#使用ionic框架提供的樣式進行APP製作--側滑選單

# 1.HTML程式碼

<body ng-app="todo">
  <ion-side-menus>

    <!-- 中心内容 -->
    <ion-side-menu-content>
      <ion-header-bar class="bar-dark">
        <h1 class="title">Ionic</h1>
      </ion-header-bar>
      
      <ion-content>
          <p class="list card">

  <p class="item item-avatar">
    <img src="../img/222.jpg"/>
    <h2>Ionic Demo</h2> 
    <p>LJY</p>
  </p>

  <p class="item item-image">
    <img src="../img/28.jpg">
  </p>

  <a class="item  assertive" href="#">
   
    Try Ionic  </a></p>
      </ion-content>
    </ion-side-menu-content>

    <!-- 左侧菜单 -->
    <ion-side-menu side="left">
      <ion-header-bar class="bar-dark">
        <h1 class="title">Projects</h1>
        
      </ion-header-bar>
      <p class="list">

  <p class="item item-pider">
   这是左侧菜单 
  </p>

  <a class="item" href="#">
    This is  page1  </a><a class="item" href="#">
    This is  page2    
  </a><a class="item" href="#">
    This is  page3  </a></p>
    </ion-side-menu>

  </ion-side-menus><script type="text/javascript" src="../js/app.js"></script>
    </body>

登入後複製

2.js

angular.module(&#39;todo&#39;, [&#39;ionic&#39;])

登入後複製

這樣就實作了簡單的首頁和側邊選單的製作。

3使用ionic框架提供的樣式進行APP製作--底部選項卡


                    
                        
                            
                                BLUE
                        
                        
                            
                                YELLOW
                        
                        
                            
                                PINK
                        
                    
                
<script>
        angular.module(&amp;#39;todo&amp;#39;, [&amp;#39;ionic&amp;#39;])
            .controller("todo", function($scope, $timeout, $ionicLoading) {
                // 页面加载动画
                $ionicLoading.show({
                    content: &#39;Loading&#39;,
                    animation: &#39;fade-in&#39;,
                    showBackdrop: true,
                    maxWidth: 200,
                    showDelay: 0
                });
                // 设置加载动画结束时间
                $timeout(function() {
                    $ionicLoading.hide();
                    $scope.stooges = [{
                        name: &#39;Moe&#39;
                    }, {
                        name: &#39;Larry&#39;
                    }, {
                        name: &#39;Curly&#39;
                    }];
                }, 400);
46                 $scope.myActiveSlide = 0;
            })
    </script>

登入後複製

2使用ionic框架提供的样式进行APP制作--图片轮播及加载动画


                    
                        
                            
                                BLUE
                        
                        
                            
                                YELLOW
                        
                        
                            
                                PINK
                        
                    
                
<script>
        angular.module(&amp;#39;todo&amp;#39;, [&amp;#39;ionic&amp;#39;])
            .controller("todo", function($scope, $timeout, $ionicLoading) {
                // 页面加载动画
                $ionicLoading.show({
                    content: &#39;Loading&#39;,
                    animation: &#39;fade-in&#39;,
                    showBackdrop: true,
                    maxWidth: 200,
                    showDelay: 0
                });
                // 设置加载动画结束时间
                $timeout(function() {
                    $ionicLoading.hide();
                    $scope.stooges = [{
                        name: &#39;Moe&#39;
                    }, {
                        name: &#39;Larry&#39;
                    }, {
                        name: &#39;Curly&#39;
                    }];
                }, 400);
46                 $scope.myActiveSlide = 0;
            })
    </script>

登入後複製

以上是Ionic建立側邊欄輪播圖載入動畫的方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！