ionic基础概念

最新推荐文章于 2019-04-28 11:51:11 发布

野有蔓草零露

最新推荐文章于 2019-04-28 11:51:11 发布

阅读量428

点赞数

分类专栏： ionic+angularjs 文章标签： ionic基础介绍

本文链接：https://blog.csdn.net/L1991lulu/article/details/51188103

版权

ionic+angularjs 专栏收录该内容

0 篇文章 0 订阅

订阅专栏

IONIC

ionic是一个强大的_混合式/hybrid_HTML5移动开发框架，特点是使用标准的HTML、 CSS和JavaScript，开发跨平台（目前支持：Android、iOS，计划支持：Windows Phone、Firefox OS）的原生App应用：

这里写图片描述

ionic.js对AngularJS进行了扩展，它的主要贡献是将移动端开发中常见的UI组件抽象成AngularJS的指令，便于我们可以在HTML开发中快速应用。

这里写图片描述

考虑到移动应用交互的特点，ionic.js也提供了手势操作的事件，比如：
- hold - 长按
- tap - 敲击
- drag - 拖动
- swipe - 滑动

例如：
HTML

<!DOCTYPE html>
<html ng-app="ezApp">
<head>
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no,width=device-width,height=device-height">
    <script src="ionic.bundle.min.js"></script>
    <link rel="stylesheet" type="text/css" href="ionic.min.css">
</head>
<body ng-controller="ezCtrl">
    <div class="scroll-content padding" 
        on-swipe-up="onSwipeUp()" 
        on-swipe-down="onSwipeDown()"
        on-swipe-left="onSwipeLeft()" 
        on-swipe-right="onSwipeRight()">
        <p class="padding">按住鼠标快速划！</p>
        <i class="icon {{icon}}"></i>
    </div>
</body>
</html>

JavaScript

angular.module("ezApp",["ionic"])
.controller("ezCtrl",function($scope){
    $scope.icon="ion-arrow-expand";
    $scope.onSwipeUp = function(){
        $scope.icon="ion-arrow-up-a";
    };
    $scope.onSwipeDown = function(){
        $scope.icon="ion-arrow-down-a";
    };
    $scope.onSwipeLeft = function(){
        $scope.icon="ion-arrow-left-a";
    };
    $scope.onSwipeRight = function(){
        $scope.icon="ion-arrow-right-a";
    };
});

CSS

.icon{
    font-size:60px;
}

效果

初始页面

向下划动效果

野有蔓草零露

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ionic基础概念

IONICionic是一个强大的_混合式/hybrid_HTML5移动开发框架，特点是使用标准的HTML、 CSS和JavaScript，开发跨平台（目前支持：Android、iOS，计划支持：Windows Phone、Firefox OS）的原生App应用：ionic.js对AngularJS进行了扩展，它的主要贡献是将移动端开发中常见的UI组件抽象成AngularJS的指令，便于我们可以在
复制链接

扫一扫