基于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 switch case 另类写法
Mar 14 Javascript
JQuery判断HTML元素是否存在的两种解决方法
Dec 26 Javascript
Javascript基础教程之数据类型 (字符串 String)
Jan 18 Javascript
JS模拟的Map类实现方法
Jun 17 Javascript
jQuery实现右键菜单、遮罩等效果代码
Sep 27 Javascript
JS求解三元一次方程组值的方法
Jan 03 Javascript
vue日期组件 支持vue1.0和2.0
Jan 09 Javascript
详解vue 中使用 AJAX获取数据的方法
Jan 18 Javascript
一个Js文件函数中调用另一个Js文件函数的方法演示
Aug 14 Javascript
通过原生vue添加滚动加载更多功能
Nov 21 Javascript
TypeScript 引用资源文件后提示找不到的异常处理技巧
Jul 15 Javascript
Vue-cli4 配置 element-ui 按需引入操作
Sep 11 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
关于Intype一些小问题的解决办法
2008/03/28 PHP
基于empty函数的判断详解
2013/06/17 PHP
通过dbi使用perl连接mysql数据库的方法
2014/04/16 PHP
PHP中Fatal error session_start()错误解决步骤
2014/08/05 PHP
PHP中使用Imagick读取pdf并生成png缩略图实例
2015/01/21 PHP
php的api数据接口书写实例(推荐)
2016/09/22 PHP
jquery不支持toggle()高(新)版本的问题解决
2016/09/24 PHP
PHP编程计算日期间隔天数的方法
2017/04/26 PHP
[原创]PHP实现SQL语句格式化功能的方法
2017/07/28 PHP
PHP5.6读写excel表格文件操作示例
2019/02/26 PHP
JavaScript toFixed() 方法
2010/04/15 Javascript
js捕获鼠标右键菜单中的粘帖事件实现代码
2013/04/01 Javascript
jQuery之按钮组件的深入解析
2013/06/19 Javascript
js制作简易年历完整实例
2015/01/28 Javascript
javascript判断并获取注册表中可信任站点的方法
2015/06/01 Javascript
JavaScript获取并更改input标签name属性的方法
2015/07/02 Javascript
JS实现图片平面旋转的方法
2016/03/01 Javascript
js获取所有checkbox的值的简单实例
2016/05/30 Javascript
Vue常用指令V-model用法
2017/03/08 Javascript
es6学习笔记之Async函数基本教程
2017/05/11 Javascript
无限循环轮播图之运动框架(原生JS实现)
2017/10/01 Javascript
详解webpack4升级指南以及从webpack3.x迁移
2018/06/12 Javascript
深入Vue-Router路由嵌套理解
2018/08/13 Javascript
React项目动态设置title标题的方法示例
2018/09/26 Javascript
小程序实现列表点赞功能
2018/11/02 Javascript
python getopt详解及简单实例
2016/12/30 Python
Python实现mysql数据库更新表数据接口的功能
2017/11/19 Python
python的scipy实现插值的示例代码
2019/11/12 Python
Python实现图像的垂直投影示例
2020/01/17 Python
Python如何实现后端自定义认证并实现多条件登陆
2020/06/22 Python
Python就将所有的英文单词首字母变成大写
2021/02/12 Python
HTML5的文档结构和新增标签完全解析
2017/04/21 HTML / CSS
Forever 21美国官网:美国标志性快时尚品牌
2017/02/20 全球购物
Saks Fifth Avenue澳洲/亚太地区:萨克斯第五大道精品百货店
2019/06/09 全球购物
元旦联欢会感言
2014/03/04 职场文书
党支部创先争优公开承诺书
2015/04/30 职场文书