ホームページ > 記事 > ウェブフロントエンド > Ionic を使用してサイドバー カルーセルを構築し、アニメーションを読み込む方法
超使いやすいモバイルフレームワーク - Ionic
Ionic は、高速、最新のインターフェイス、美しい外観の特徴を備えた軽量のモバイル UI ライブラリです。
携帯電話上で動作が遅い他の UI ライブラリの問題を解決するために、より良いユーザー エクスペリエンスを得るために、IOS6 および Android4.1 より前のバージョンのサポートを直接放棄します。
(私は現在、モバイル プロジェクトの制作について学んでいます。この記事では、Ionic の使用方法と、私が学んだいくつかのスタイルについて簡単に説明します。)
1. HBuilder は APP プロジェクトを作成し、ionic の css および js (フォント) ファイルをインポートします。
2. ionic.css および ionic.bundle.js ファイルをインポートします。
1. HTMLコード
2.js
<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>
これにより、簡単なホームページやサイドメニューの制作が可能になります。
<div> <ion-slide-box active-slide="myActiveSlide" does-continue="true" slide-interval="1000"> <ion-slide> <div class="box blue" on-tap="aaa()"> <h1>BLUE</h1></div> </ion-slide> <ion-slide> <div class="box yellow"> <h1>YELLOW</h1></div> </ion-slide> <ion-slide> <div class="box pink"> <h1>PINK</h1></div> </ion-slide> </ion-slide-box> </div> <script> angular.module('todo', ['ionic']) .controller("todo", function($scope, $timeout, $ionicLoading) { // 页面加载动画 $ionicLoading.show({ content: 'Loading', animation: 'fade-in', showBackdrop: true, maxWidth: 200, showDelay: 0 }); // 设置加载动画结束时间 $timeout(function() { $ionicLoading.hide(); $scope.stooges = [{ name: 'Moe' }, { name: 'Larry' }, { name: 'Curly' }]; }, 400); 46 $scope.myActiveSlide = 0; }) </script>
<div> <ion-slide-box active-slide="myActiveSlide" does-continue="true" slide-interval="1000"> <ion-slide> <div class="box blue" on-tap="aaa()"> <h1>BLUE</h1></div> </ion-slide> <ion-slide> <div class="box yellow"> <h1>YELLOW</h1></div> </ion-slide> <ion-slide> <div class="box pink"> <h1>PINK</h1></div> </ion-slide> </ion-slide-box> </div> <script> angular.module('todo', ['ionic']) .controller("todo", function($scope, $timeout, $ionicLoading) { // 页面加载动画 $ionicLoading.show({ content: 'Loading', animation: 'fade-in', showBackdrop: true, maxWidth: 200, showDelay: 0 }); // 设置加载动画结束时间 $timeout(function() { $ionicLoading.hide(); $scope.stooges = [{ name: 'Moe' }, { name: 'Larry' }, { name: 'Curly' }]; }, 400); 46 $scope.myActiveSlide = 0; }) </script>
以上がIonic を使用してサイドバー カルーセルを構築し、アニメーションを読み込む方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。