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

在Illustrator中加载插件时出错[修复]Feb 19, 2024 pm 12:00 PM

启动AdobeIllustrator时是否会弹出加载插件时出错的消息？一些Illustrator用户在打开该应用程序时遇到了此错误。消息后面紧跟着一系列有问题的插件。该错误提示表明已安装的插件存在问题，但也可能是由于VisualC++DLL文件损坏或首选项文件受损等其他原因引起。如果遇到此错误，我们将在本文中指导您修复问题，请继续阅读以下内容。在Illustrator中加载插件时出错如果您在尝试启动AdobeIllustrator时收到“加载插件时出错”的错误消息，您可以使用以下用途：以管理员身

Stremio字幕不工作；加载字幕时出错Feb 24, 2024 am 09:50 AM

字幕在你的WindowsPC上不能在Stremio上运行吗？一些Stremio用户报告说，视频中没有显示字幕。许多用户报告说遇到了一条错误消息，上面写着“加载字幕时出错”。以下是与此错误一起显示的完整错误消息：加载字幕时出错加载字幕失败：这可能是您正在使用的插件或您的网络有问题。正如错误消息所说，可能是您的互联网连接导致了错误。因此，请检查您的网络连接，并确保您的互联网工作正常。除此之外，这个错误的背后可能还有其他原因，包括字幕加载项冲突、特定视频内容不支持字幕以及Stremio应用程序过时。如

插入超链接时Outlook冻结Feb 19, 2024 pm 03:00 PM

如果您在向Outlook插入超链接时遇到冻结问题，可能是由于网络连接不稳定、Outlook版本旧、防病毒软件干扰或加载项冲突等原因。这些因素可能导致Outlook无法正常处理超链接操作。修复插入超链接时Outlook冻结的问题使用以下修复程序解决插入超链接时Outlook冻结的问题：检查已安装的加载项更新Outlook暂时禁用您的防病毒软件，然后尝试创建新的用户配置文件修复办公室应用程序卸载并重新安装Office我们开始吧。1]检查已安装的加载项可能是Outlook中安装的某个加载项导致了问题。

PHP实现无限滚动加载Jun 22, 2023 am 08:30 AM

随着互联网的发展，越来越多的网页需要支持滚动加载，而无限滚动加载是其中的一种。它可以让页面不断加载新的内容，使用户可以更流畅地浏览网页。在这篇文章中，我们将介绍如何使用PHP实现无限滚动加载。一、什么是无限滚动加载？无限滚动加载是一种基于滚动条的网页内容加载方式。它的原理是当用户滚动至页面底部时，通过AJAX异步调取后台数据，实现不断加载新的内容。这种加载方

css加载不出来怎么解决Oct 20, 2023 am 11:29 AM

css加载不出来的解决办法有检查文件路径、检查文件内容、清除浏览器缓存、检查服务器设置、使用开发者工具和检查网络连接等。详细介绍：1、检查文件路径，首先请确保CSS文件的路径正确，如果CSS文件位于网站的不同部分或子目录中，需要提供正确的路径，如果CSS文件位于根目录下，路径应该是直接的；2、检查文件内容，如果路径正确，那么问题可能出在CSS文件本身，打开CSS文件检查等等。

安装win7加载usb驱动失败怎么办Jul 11, 2023 am 08:13 AM

在安装win7系统中，有网友遇到了加载usb驱动失败的情况，usb设备无法在新的win7系统中被识别，常见的u盘，鼠标等设备就无法使用了。那么安装win7加载usb驱动失败怎么办？下面小白就教下大家安装win7加载usb驱动失败的解决方法。方法一：1、首先我们打开电脑进入电脑系统，在电脑系统查看电脑的系统版本。确认电脑系统的版本与设备驱动的版本是否一致。2、确认驱动的版本后，将USB设备连接到电脑系统。电脑系统显示，设备无法连接到系统。3、在连接信息页面，点击帮助按钮查看帮助信息。4、如果电脑系

JavaScript 如何实现滚动到页面底部自动加载的无限滚动效果？Oct 27, 2023 pm 06:30 PM

JavaScript如何实现滚动到页面底部自动加载的无限滚动效果？无限滚动效果是现代网页开发中常见的功能之一，它可以在滚动到页面底部时自动加载更多内容，使得用户可以无需手动点击按钮或链接就能够获取更多的数据或资源。在本文中，我们将探讨如何使用JavaScript来实现这一功能，并提供具体的代码示例。实现滚动到页面底部自动加载的无限滚动效果，主要分为以下

Vue.js实现无限滚动加载的完整指南Jun 09, 2023 pm 04:11 PM

随着数据量不断增加，网页的滚动加载逐渐成为了用户体验的重要部分。在这篇文章中，我们将讨论如何使用Vue.js实现无限滚动加载的完整指南。什么是无限滚动加载？无限滚动加载，又称为无限滚动，是一种Web设计技术，用于在用户滚动页面到底部时添加更多内容。这种技术常用于博客、社交媒体、在线商店等需要动态显示内容的网站上。无限滚动与分页不同。在传统的分页中，用户必须通

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

AI Hentai Generator

Erstellen Sie kostenlos Ai Hentai.

Heißer Artikel

R.E.P.O. Energiekristalle erklärten und was sie tun (gelber Kristall)

2 Wochen vorBy尊渡假赌尊渡假赌尊渡假赌

Wie lange dauert es, um Split Fiction zu schlagen?

1 Monate vorByDDD

R.E.P.O. Dateispeicherspeicherort: Wo ist es und wie schützt sie?

1 Monate vorByDDD

R.E.P.O. Beste grafische Einstellungen

2 Wochen vorBy尊渡假赌尊渡假赌尊渡假赌

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

1 Wochen vorByDDD

Heiße Werkzeuge

SublimeText3 Englische Version

Empfohlen: Win-Version, unterstützt Code-Eingabeaufforderungen!

SAP NetWeaver Server-Adapter für Eclipse

Integrieren Sie Eclipse mit dem SAP NetWeaver-Anwendungsserver.

WebStorm-Mac-Version

Nützliche JavaScript-Entwicklungstools

SublimeText3 Linux neue Version

SublimeText3 Linux neueste Version

MinGW – Minimalistisches GNU für Windows

Dieses Projekt wird derzeit auf osdn.net/projects/mingw migriert. Sie können uns dort weiterhin folgen. MinGW: Eine native Windows-Portierung der GNU Compiler Collection (GCC), frei verteilbare Importbibliotheken und Header-Dateien zum Erstellen nativer Windows-Anwendungen, einschließlich Erweiterungen der MSVC-Laufzeit zur Unterstützung der C99-Funktionalität. Die gesamte MinGW-Software kann auf 64-Bit-Windows-Plattformen ausgeführt werden.

Heiße Themen

Wo ist der Login-Zugang für Gmail-E-Mail?

7391

1630

1357

1268

1216