基于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 相关文章推荐
关于jQuery参考实例2.0 用jQuery选择元素
Apr 07 Javascript
js打开windows上的可执行文件示例
May 27 Javascript
JavaScript中的操作符==与===介绍
Dec 31 Javascript
JavaScript列表框listbox全选和反选的实现方法
Mar 18 Javascript
js正则匹配出所有图片及图片地址src的方法
Jun 08 Javascript
jQuery解决IE6、7、8不能使用 JSON.stringify 函数的问题
May 31 Javascript
js/jq仿window文件夹框选操作插件
Mar 08 Javascript
Bootstrap Table使用整理(二)
Jun 09 Javascript
jQuery实现table表格checkbox全选的方法分析
Jul 04 jQuery
利用Bootstrap Multiselect实现下拉框多选功能
Apr 08 Javascript
详解Vue中的scoped及穿透方法
Apr 18 Javascript
详解webpack的clean-webpack-plugin插件报错
Oct 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
安健A254立体声随身听的分析与打磨
2021/03/02 无线电
使用PHP遍历文件目录与清除目录中文件的实现详解
2013/06/24 PHP
PHP实现转盘抽奖算法分享
2020/04/15 PHP
php利用ZipArchive类操作文件的实例
2020/01/21 PHP
表格 隔行换色升级版
2009/11/07 Javascript
JS实现鼠标箭头变成一个燃烧烛光效果的方法
2015/02/28 Javascript
谈谈对offsetleft兼容性的理解
2015/11/11 Javascript
jQuery筛选数组之grep、each、inArray、map的用法及遍历json对象
2016/06/20 Javascript
微信小程序使用navigateTo数据传递的实例
2017/09/26 Javascript
AngularJs用户登录问题处理(交互及验证、阻止FQ处理)
2017/10/26 Javascript
基于element-ui的rules中正则表达式
2018/09/04 Javascript
微信小程序事件对象中e.target和e.currentTarget的区别详解
2019/05/08 Javascript
微信小程序入口场景的问题集合与相关解决方法
2019/06/26 Javascript
JavaScript设计模式--简单工厂模式实例分析【XHR工厂案例】
2020/05/23 Javascript
vue+elementUI 实现内容区域高度自适应的示例
2020/09/26 Javascript
[06:24]DOTA2 2015国际邀请赛中国区预选赛第二日TOP10
2015/05/27 DOTA
[01:48]完美圣典齐天大圣至宝宣传片
2016/12/17 DOTA
Python实现Linux的find命令实例分享
2017/06/04 Python
Python动态导入模块的方法实例分析
2018/06/28 Python
python yield关键词案例测试
2019/10/15 Python
Python图片的横坐标汉字实例
2019/12/04 Python
python GUI库图形界面开发之PyQt5访问系统剪切板QClipboard类详细使用方法与实例
2020/02/27 Python
keras中的卷积层&amp;池化层的用法
2020/05/22 Python
keras 自定义loss损失函数,sample在loss上的加权和metric详解
2020/05/23 Python
HTML5 History API 实现无刷新跳转
2016/01/11 HTML / CSS
师范教师大学生职业生涯规划范文
2014/01/05 职场文书
市场营销专业自荐书
2014/06/10 职场文书
社区服务标语
2014/07/01 职场文书
自荐信模板大全
2015/03/27 职场文书
二审代理词范文
2015/05/25 职场文书
李强优秀员工观后感
2015/06/16 职场文书
跳高加油稿
2015/07/21 职场文书
HTML基础-标签分类(闭合标签,空标签,块级元素,行内元素,行级块元素,可替换元素)
2021/03/31 HTML / CSS
深入浅析Redis 集群伸缩原理
2021/05/15 Redis
Python如何将list中的string转换为int
2022/07/15 Ruby
python缺失值填充方法示例代码
2022/12/24 Python