<body ng-app="testApp">

<ion-header-bar align-title="left" class="bar-positive">

  <div class="buttons">

    <button class="button" ng-click="doSomething()">左侧按钮</button>

  </div>

  <h1 class="title">Title!</h1>

  <div class="buttons">

    <button class="button">右侧按钮</button>

  </div>

</ion-header-bar>

<ion-content ng-controller="MyController">

  <ion-refresher

          pulling-text="下拉刷新..."

          on-refresh="doRefresh()">

  </ion-refresher>

  <p> 一些内容! </p>

  <div>

    <button ng-click="scrollTop()">滚动到顶部!</button>

  </div>

  <ion-infinite-scroll

          on-infinite="loadMore()"

          distance="1%"

          ng-if="moreDataCanBeLoaded()"

          icon="ion-loading-c"

          on-infinite="loadMoreData()">

  >

  </ion-infinite-scroll>

</ion-content>

<ion-footer-bar align-title="left" class="bar-assertive">

  <div class="buttons">

    <button class="button">左侧按钮</button>

  </div>

  <h1 class="title">Title!</h1>

  <div class="buttons" ng-click="doSomething()">

    <button class="button">右侧按钮</button>

  </div>

</ion-footer-bar>

<script type="text/javascript">

   angular.module('testApp', ['ionic'])

            .controller('MyController', function($scope, $http, $ionicScrollDelegate) {

              $scope.items = [1,2,3];

              $scope.scrollTop = function() {

                $ionicScrollDelegate.scrollTop();

              };

              $scope.doRefresh = function() {

                $http.get('/new-items')

                        .success(function(newItems) {

                          $scope.items = newItems;

                        })

                        .finally(function() {

                          // 停止广播ion-refresher

                          $scope.$broadcast('scroll.refreshComplete');

                        });

              };

            });

    function MyController($scope, $http) {

      $scope.items = [];

      $scope.loadMore = function() {

        $http.get('/more-items').success(function(items) {

          useItems(items);

          $scope.$broadcast('scroll.infiniteScrollComplete');

        });

      };

      $scope.$on('stateChangeSuccess', function() {

        $scope.loadMore();

      });

    }

</script>

</body>

　　

　　

Ionic 移动端的更多相关文章

  1. angularJS+Ionic移动端图片上传的解决办法

    前端开发中经常会碰到图片上传的问题,网上的解决办法很多,可是有些图片上传的插件会有一些附属的插件,因此因为一个图片上传的问题可能额需要引入其他插件到项目中,久而久之项目会不伦不类,有时候插件之间也会有 ...

  2. ionic更改端口号

    —— 重新指定端口号为8888 serve [options] ............................... 启动本地服务器进行开发测试 dev/testing [--console ...

  3. ionic使用方法

    windows下安装配置 npm install -g ionic npm install -g cordova ionic start myproject cd myproject ionic pl ...

  4. ionic 混合应用开发

    windows下安装配置 npm install -g ionic npm install -g cordova ionic start myproject cd myproject ionic pl ...

  5. Web前端开发——Ionic 3.0【爱创课堂专业前端培训】

    前端开发——Ionic 3.0 一.Ionic 移动端有三种开发方向 源生APP开发, 移动端web开发 混合开发(介于以上两者之间的) 类微信小程序 reactNative,用react语法,开发a ...

  6. 解决跨域问题之anywhere

    anywhere搭建服务,ionic PC端和手机端可以通过网址来查看网页效果.解决跨域问题 大家都知道编写完HTML代码后,可以直接在pc端的浏览器查看,但现在手机端越来越广泛了,想跟在pc端查看网 ...

  7. 基于ionic+cordova+angularJs从零开始搭建自己的移动端H5 APP

    这里详细介绍下如何用ionic+cordova+angularjs搭建自己的移动端app,包括环境搭建,框架使用等,具体项目已放置在github上,可下载下来自行启动. 下载地址:https://gi ...

  8. 微信端应用 ionic实现texarea 自适应高度

    最近公司项目,做微信端用到texarea 需要实现自适应高度的功能 当然自适应高度的方法很多网上找一大片,最直接的方式就是在使用到texarea的controller中添加js代码事件来实现,这中方式 ...

  9. Ionic进行PC端Web开发时通过脚本压缩提高第一次加载效率

    1. 问题 1.1. 问题上下文描述: 基于Ionic进行PC端的Web应用开发: 使用Tomcat作为最终服务发布容器. 1.2. 问题描述: 编译后main.js的大小为4-6MByte.(集成第 ...

随机推荐

  1. 安装mysql教程

    linux下安装mysql 方式一:源码包安装 环境介绍:本安装教程基于虚拟机CentOS7.6版本进行安装,mysql版本为5.7版本. 一.卸载已安装的mysql服务 由于我原本在虚拟机已安装过m ...

  2. tomcat结合shiro无文件webshell的技术研究以及检测方法

    0x01简介 shiro结合tomcat回显,使用公开的方法,回显大多都会报错.因为生成的payload过大,而tomcat在默认情况下,接收的最大http头部大小为8192.如果超过这个大小,则to ...

  3. 一次运维-堡垒机多次跳转导出及导入mysql数据库

    1. 场景描述 记录一次运维,朋友公司要从线上环境同步数据到测试环境,因为公司监管问题,导致数据无法从线上获取,需要通过vpn,堡垒机,3次跳转到目标主机,通过命令导出mysql数据文件,然后再将数据 ...

  4. 阿里P7岗位面试，面试官问我：为什么HashMap底层树化标准的元素个数是8

    前言 先声明一下,本文有点标题党了,像我这样的菜鸡何德何能去面试阿里的P7岗啊,不过,这确实是阿里p7级岗位的面试题,当然,参加面试的人不是我,而是我部门的一个大佬.他把自己的面试经验分享给了我,也让 ...

  5. 苹果手机history.back()返回不刷新问题

    苹果手机,a页面打开b页面,b页面使用history.back(-1)返回a页面时,a页面不刷新,可在a页面添加以下代码: var isPageHide = false; window.addEven ...

  6. Sightseeing，题解

    题目: 题意: 找到从s到t与最短路长度相差少于1的路径总数. 分析: 首先,搞明白题意之后,我们来考虑一下怎么处理这个1,怎样找相差为1的路径呢?我们这样想,如果有相差为1的路径,那么它将会是严格的 ...

  7. Scrapy模拟登录赶集网

    1.打开赶集网登录界面,先模拟登录并抓包,获得post请求的request参数 2. 我们只需构造出上面的参数传入formdata即可 参数分析: setcookie:为自动登录所传的值,不勾选时默认 ...

  8. json转化为C#、Java、TypeScript、VisualBasic、Python实体类

    效果展示: 源码下载地址:https://github.com/doyoulaikeme/DotNetSample/tree/master/DotNetSample2

  9. Android屏幕适配技巧

    屏幕适配一直是困扰 Android 开发工程师的一大问题,但是随着近几年各种屏幕适配方案的诞生,以及谷歌各种适配控件的推出,屏幕适配也显得越来越容易,这节课我们就来总结一下关于屏幕适配的那些技巧. C ...

  10. day17 生成器, 面向过程, 三元表达式, 生成式

    1. 生成器 生成器:就是一种自定义的迭代器,是用来返回多次值自定义迭代器的好处:节省内存 return只能返回一次值,函数就立即结束了yield 1.可以挂起函数,保存函数的运行状态 2.可以用来返 ...