基于ionic实现下拉刷新功能


Posted in Javascript onMay 10, 2018

本文实例为大家分享了ionic实现下拉刷新功能的具体代码,供大家参考,具体内容如下

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8" />
  <title>ionic</title>

  <!--记得导入ionic包和ionic样式-->
  <script src="js/ionic.bundle.min.js" type="text/javascript" charset="utf-8"></script>
  <link rel="stylesheet" type="text/css" href="css/ionic.css" rel="external nofollow" />
  <!--
   ionic
   angular
    $http--服务
    ng- 指令
    表达式 {{}}

   刷新案例
    ul--
    数据
  -->
 </head>

 <body ng-app="myApp" ng-controller="myCtrl">

  <ion-header-bar class="bar-calm">
   <h1 class="title">下拉刷新</h1>
  </ion-header-bar>
  <ion-content>
   <!--
    下拉刷新
    ion-refresher
     pulling-text 下拉的时候显示的文本
     pulling-icon 图标
     onRefresh 当刷新的时候调用的方法
   -->
   <ion-refresher pulling-text="松手刷新..." on-refresh = "doRefresh()" pulling-icon="img/arrow-down-c.png">

   </ion-refresher>
   <ul class="list">
    <li class="item" ng-repeat="good in goods">{{good.gname}}</li>
   </ul>
  </ion-content>

  <!--
   angular
    mvc 视图 view 各种标签,数据 ng-model{{}} ,控制器 controller 逻辑代码
    指令:一个特殊的属性
    表达式 : 一段代码 ,主要功能:取数据,可以进行运算
    模块:一些功能和视图组成的整体
    服务:就是一个方法,满足一些需要而定义的方法。内置服务30多个
      $http
    内置过滤器:9个
      管道符 |
  -->

  <script type="text/javascript">
   //创建模块
   var mod = angular.module("myApp",["ionic"]);//[]里面的是需要注入的对象。两个:ngRoute /ionic
   //创建控制器
   mod.controller("myCtrl",function($scope,$http){

    //定义数组、也就是model数据
    $scope.goods=[{"gname":"秋裤"},{"gname":"羽绒服"}];
    //刷新的方法
    $scope.doRefresh=function(){
     //请求网络,加载数据
     $http.get("data.json").then(function(req){
      //取得数据 ,req将数据封装到data属性里面了
      var d = req.data;
      //将一个集合整个加入另外一个集合contact()
//      $scope.goods= $scope.goods.contact(d);
      for (var i =0;i<d.length;i++) {
       $scope.goods.unshift(d[i]);
      }
      //结束刷新
      $scope.$broadcast("scroll.refreshComplete");
     },function(req){
      alert("失败");
     });
//     .finally(function(){
//      
//     });

    }
   });
  </script>
 </body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 快速排序函数代码
May 30 Javascript
Area 区域实现post提交数据的js写法
Apr 22 Javascript
jquery访问ashx文件示例代码
Aug 11 Javascript
Javascript 赋值机制详解
Nov 23 Javascript
详解JavaScript表单验证(E-mail 验证)
Mar 31 Javascript
jQuery鼠标悬停内容动画切换效果
Apr 27 jQuery
基于node.js之调试器详解
Aug 22 Javascript
基于vue-element组件实现音乐播放器功能
May 06 Javascript
jQuery使用each遍历循环的方法
Sep 19 jQuery
实例介绍JavaScript中多种组合继承
Jan 20 Javascript
vue 解除鼠标的监听事件的方法
Nov 13 Javascript
js实现计时器秒表功能
Dec 16 Javascript
详解各版本React路由的跳转的方法
May 10 #Javascript
React路由管理之React Router总结
May 10 #Javascript
React从react-router路由上做登陆验证控制的方法
May 10 #Javascript
详解Angular路由之路由守卫
May 10 #Javascript
JavaScript实现一个简易的计算器实例代码
May 10 #Javascript
浅谈node.js 命令行工具(cli)
May 10 #Javascript
Js经典案例的实例代码
May 10 #Javascript
You might like
php session应用实例 登录验证
2009/03/16 PHP
PHP SQLite类
2009/05/07 PHP
ThinkPHP3.1新特性之Action参数绑定
2014/06/19 PHP
linux下为php添加iconv模块的方法
2016/02/28 PHP
Javascript操纵Cookie实现购物车程序
2007/02/15 Javascript
namespace.js Javascript的命名空间库
2011/10/11 Javascript
struts2+jquery+json实现异步加载数据(自写)
2013/06/24 Javascript
javascript不可用的问题探究
2013/10/01 Javascript
js打造数组转json函数
2015/01/14 Javascript
jQuery插件jPaginate实现无刷新分页
2015/05/04 Javascript
JS实现从连接中获取youtube的key实例
2015/07/02 Javascript
javascript实现类似于新浪微博搜索框弹出效果的方法
2015/07/27 Javascript
HTML5之WebSocket入门3 -通信模型socket.io
2015/08/21 Javascript
解析Node.js基于模块和包的代码部署方式
2016/02/16 Javascript
简单的js计算器实现
2016/10/26 Javascript
使用Javascript判断浏览器终端设备(PC、IOS(iphone)、Android)
2017/01/04 Javascript
浅谈Vue.use到底是什么鬼
2020/01/21 Javascript
三步搞定:Vue.js调用Android原生操作
2020/09/07 Javascript
ant design的table组件实现全选功能以及自定义分页
2020/11/17 Javascript
实用的 vue tags 创建缓存导航的过程实现
2020/12/03 Vue.js
深入理解Python中装饰器的用法
2016/06/28 Python
Python多层装饰器用法实例分析
2018/02/09 Python
Python cookbook(数据结构与算法)找到最大或最小的N个元素实现方法示例
2018/02/13 Python
Pyinstaller打包.py生成.exe的方法和报错总结
2019/04/02 Python
通过python实现随机交换礼物程序详解
2019/07/10 Python
Django框架创建项目的方法入门教程
2019/11/04 Python
Python查找不限层级Json数据中某个key或者value的路径方式
2020/02/27 Python
Python实现汇率转换操作
2020/05/03 Python
一文轻松掌握python语言命名规范规则
2020/06/18 Python
Python同时迭代多个序列的方法
2020/07/28 Python
详解使用Python写一个向数据库填充数据的小工具(推荐)
2020/09/11 Python
Python绘图实现台风路径可视化代码实例
2020/10/23 Python
小学校长竞聘演讲稿
2014/05/16 职场文书
英语教师自荐信
2014/05/26 职场文书
2015年宣传部部长竞选演讲稿
2014/11/28 职场文书
Vue+Flask实现图片传输功能
2022/04/01 Vue.js