So erstellen Sie ein Seitenleistenkarussell und laden Animationen mit Ionic-HTML-Tutorial-php.cn

Heim

Web-Frontend

HTML-Tutorial

So erstellen Sie ein Seitenleistenkarussell und laden Animationen mit Ionic

一个新手

Oct 23, 2017 am 10:13 AM

ionic加载

Super einfach zu bedienendes mobiles Framework – Ionic

Ionic ist eine leichte mobile UI-Bibliothek mit den Eigenschaften hoher Geschwindigkeit, moderner Benutzeroberfläche und schönem Erscheinungsbild.

Um das Problem zu lösen, dass einige andere UI-Bibliotheken auf Mobiltelefonen langsam laufen, wird die Unterstützung für Versionen unter IOS6 und Android 4.1 direkt eingestellt, um eine bessere Benutzererfahrung zu erzielen.

(Vor kurzem lerne ich etwas über die mobile Projektproduktion. Dieser Artikel veranschaulicht kurz einige der erlernten Stile zur Verwendung von Ionic.)

1Ionic installieren

1.HBuilder erstellt das APP-Projekt und importiert das CSS von ionic .js-Dateien (Schriftarten).

2 Importieren Sie die Dateien ionic.css und ionic.bundle.js.

2Verwenden Sie die vom ionischen Framework bereitgestellten Stile für das APP-Produktions-seitige Schiebemenü

1.HTML-Code

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

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

  <p class="item item-avatar">
    <img  src="/static/imghwm/default1.png"  data-src="../img/222.jpg"  class="lazy"  / alt="So erstellen Sie ein Seitenleistenkarussell und laden Animationen mit Ionic" >
    <h2 id="Ionic-nbsp-Demo">Ionic Demo</h2> 
    <p>LJY</p>
  </p>

  <p class="item item-image">
    <img  src="/static/imghwm/default1.png"  data-src="../img/28.jpg"  class="lazy"   alt="So erstellen Sie ein Seitenleistenkarussell und laden Animationen mit Ionic" >
  </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 id="Projects">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;])

Dies ermöglicht die Erstellung einer einfachen Homepage und eines Seitenmenüs.

3Verwenden Sie die vom ionischen Framework bereitgestellten Stile für die APP-Produktion – untere Registerkarte


                    
                        
                            
                                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>

Das obige ist der detaillierte Inhalt vonSo erstellen Sie ein Seitenleistenkarussell und laden Animationen mit Ionic. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Verwandter Artikel

Was ist der Zweck von HTML -Tags?Apr 28, 2025 am 12:02 AM

Htmltagsareessentialstruktururingwebpages, Enhancing Accesessibility, SEO und Performance.1) IHREENCLOSEDINANGLEBRAKNETSANDINPAIRSTOCRATEAHIRACHICAL STRUCTURE.2) SemantictagagslikeAndimProveSexperiencaNDSEO.3) KreativetagslikeNeenNexperienceNDSEO.

Was sind selbstklingende Tags? Geben Sie ein Beispiel an.Apr 27, 2025 am 12:04 AM

SelfclosingTagsinhtmlandxmlaretagSthatclosethemselveswithoutneedingaseparateclosingTag, vereinfachte markupstructureAndenhancingCodingffizienz) Sie sindareessentialinxMlForelementsWhoutcontent, sichergestellt wurden

Jenseits von HTML: Wesentliche Technologien für die WebentwicklungApr 26, 2025 am 12:04 AM

Um eine Website mit leistungsstarken Funktionen und guten Benutzererfahrungen zu erstellen, reicht HTML allein nicht aus. Die folgende Technologie ist auch erforderlich: JavaScript verleiht Webseiten dynamisch und interaktiv, und Echtzeitänderungen werden durch den Betrieb von DOM erreicht. CSS ist für den Stil und das Layout der Webseite verantwortlich, um die Ästhetik und die Benutzererfahrung zu verbessern. Moderne Frameworks und Bibliotheken wie React, Vue.js und Angular verbessern die Entwicklungseffizienz und die Struktur der Codeorganisation.

Was sind Boolesche Attribute in HTML? Geben Sie einige Beispiele an.Apr 25, 2025 am 12:01 AM

Boolesche Attribute sind spezielle Attribute in HTML, die ohne Wert aktiviert werden. 1. Das boolesche Attribut steuert das Verhalten des Elements dadurch, ob es existiert oder nicht, z. B. deaktiviert das Eingabefeld. 2. Das Arbeitsprinzip besteht darin, das Elementverhalten gemäß der Existenz von Attributen zu ändern, wenn sich der Browser analysiert. 3. Die grundlegende Verwendung besteht darin, Attribute direkt hinzuzufügen, und die erweiterte Verwendung kann über JavaScript dynamisch gesteuert werden. 4. Häufige Fehler denken fälschlicherweise, dass Werte festgelegt werden müssen, und die richtige Schreibmethode sollte präzise sein. 5. Die beste Praxis ist es, den Code präzise zu halten und boolesche Eigenschaften vernünftig zu verwenden, um die Leistung und Benutzererfahrung von Webseiten zu optimieren.

Wie können Sie Ihren HTML -Code validieren?Apr 24, 2025 am 12:04 AM

HTML -Code kann mit Online -Validatoren, integrierten Tools und automatisierten Prozessen sauberer sein. 1) Verwenden Sie W3CmarkupValidationService, um den HTML -Code online zu überprüfen. 2) Installieren und konfigurieren Sie die HTMLHINT-Erweiterung in VisualStudioCode zur Echtzeitüberprüfung. 3) Verwenden Sie HTMLTIDY, um HTML -Dateien im Bauprozess automatisch zu überprüfen und zu reinigen.

HTML vs. CSS und JavaScript: Vergleich von WebtechnologienApr 23, 2025 am 12:05 AM

HTML, CSS und JavaScript sind die Kerntechnologien zum Erstellen moderner Webseiten: 1. HTML Definiert die Webseitenstruktur, 2. CSS ist für das Erscheinen der Webseite verantwortlich.

HTML als Markup -Sprache: seine Funktion und ihren ZweckApr 22, 2025 am 12:02 AM

Die Funktion von HTML besteht darin, die Struktur und den Inhalt einer Webseite zu definieren, und der Zweck besteht darin, eine standardisierte Möglichkeit zur Anzeige von Informationen bereitzustellen. 1) HTML organisiert verschiedene Teile der Webseite über Tags und Attribute wie Titel und Absätze. 2) Es unterstützt die Trennung von Inhalten und Leistung und verbessert die Wartungseffizienz. 3) HTML ist erweiterbar, sodass benutzerdefinierte Tags SEO verbessern können.

Die Zukunft von HTML, CSS und JavaScript: WebentwicklungstrendsApr 19, 2025 am 12:02 AM

Die zukünftigen Trends von HTML sind Semantik und Webkomponenten, die zukünftigen Trends von CSS sind CSS-in-JS und CssShudini, und die zukünftigen Trends von JavaScript sind WebAssembly und serverlos. 1. HTML -Semantik verbessern die Zugänglichkeits- und SEO -Effekte sowie Webkomponenten die Entwicklungseffizienz, aber der Browserkompatibilität sollte die Aufmerksamkeit geschenkt werden. 2. CSS-in-JS verbessert die Flexibilität des Stilmanagements, kann jedoch die Dateigröße erhöhen. CssShudini ermöglicht den direkten Betrieb des CSS -Renderings. 3.Webassembly optimiert die Browser -Anwendungsleistung, verfügt jedoch über eine steile Lernkurve, und serverloses vereinfacht die Entwicklung, erfordert jedoch eine Optimierung von Kaltstartproblemen.

See all articles

Heiße KI -Werkzeuge

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

KI-Kleiderentferner

Video Face Swap

Tauschen Sie Gesichter in jedem Video mühelos mit unserem völlig kostenlosen KI-Gesichtstausch-Tool aus!

Heißer Artikel

Assassin's Creed Shadows: Seashell Riddle -Lösung

1 Monate vorByDDD

Was ist neu in Windows 11 KB5054979 und wie Sie Update -Probleme beheben

3 Wochen vorByDDD

Wo kann man die Kransteuerungsschlüsselkarten in Atomfall finden

1 Monate vorByDDD

Wie kann ich KB5055523 in Windows 11 nicht installieren?

2 Wochen vorByDDD

Inzoi: Wie man sich für Schule und Universität bewerbt

3 Wochen vorByDDD

Heiße Werkzeuge

MantisBT

Mantis ist ein einfach zu implementierendes webbasiertes Tool zur Fehlerverfolgung, das die Fehlerverfolgung von Produkten unterstützen soll. Es erfordert PHP, MySQL und einen Webserver. Schauen Sie sich unsere Demo- und Hosting-Services an.

SecLists

SecLists ist der ultimative Begleiter für Sicherheitstester. Dabei handelt es sich um eine Sammlung verschiedener Arten von Listen, die häufig bei Sicherheitsbewertungen verwendet werden, an einem Ort. SecLists trägt dazu bei, Sicherheitstests effizienter und produktiver zu gestalten, indem es bequem alle Listen bereitstellt, die ein Sicherheitstester benötigen könnte. Zu den Listentypen gehören Benutzernamen, Passwörter, URLs, Fuzzing-Payloads, Muster für vertrauliche Daten, Web-Shells und mehr. Der Tester kann dieses Repository einfach auf einen neuen Testcomputer übertragen und hat dann Zugriff auf alle Arten von Listen, die er benötigt.

mPDF

mPDF ist eine PHP-Bibliothek, die PDF-Dateien aus UTF-8-codiertem HTML generieren kann. Der ursprüngliche Autor, Ian Back, hat mPDF geschrieben, um PDF-Dateien „on the fly“ von seiner Website auszugeben und verschiedene Sprachen zu verarbeiten. Es ist langsamer und erzeugt bei der Verwendung von Unicode-Schriftarten größere Dateien als Originalskripte wie HTML2FPDF, unterstützt aber CSS-Stile usw. und verfügt über viele Verbesserungen. Unterstützt fast alle Sprachen, einschließlich RTL (Arabisch und Hebräisch) und CJK (Chinesisch, Japanisch und Koreanisch). Unterstützt verschachtelte Elemente auf Blockebene (wie P, DIV),