脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → ionic实现下拉刷新功能

基于ionic实现下拉刷新功能

 更新时间：2018年05月10日 17:00:39   作者：Cyq_0927  
这篇文章主要为大家详细介绍了基于ionic实现下拉刷新功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • 跨浏览器开发经验总结（三） 警惕“IE依赖综合症”

    跨浏览器开发经验总结（三） 警惕“IE依赖综合症”

    跨浏览器开发经验总结（三） 警惕“IE依赖综合症”
    2010-05-05
  • 学习Javascript闭包（Closure）知识

    学习Javascript闭包（Closure）知识

    这篇文章主要介绍了学习Javascript闭包（Closure）知识的相关资料,需要的朋友可以参考下
    2016-08-08
  • 前端axios下载excel文件(二进制)的处理方法

    前端axios下载excel文件(二进制)的处理方法

    新接了项目，遇到这样的需求，通过后端接口下载excel文件，后端没有文件地址，返回二进制流文件。接下来通过实例代码给大家分享前端axios下载excel文件(二进制)的处理方法，一起看看吧
    2018-07-07
  • 浅谈利用JavaScript进行的DDoS攻击原理与防御

    浅谈利用JavaScript进行的DDoS攻击原理与防御

    这篇文章主要介绍了浅谈利用JavaScript进行的DDoS攻击原理与防御,以及介绍了相关的中间人攻击原理,需要的朋友可以参考下
    2015-06-06
  • 基于javascript实现表格的简单操作

    基于javascript实现表格的简单操作

    这篇文章主要为大家详细介绍了基于javascript实现表格的简单操作，具有一定的参考价值，感兴趣的朋友可以参考一下
    2016-05-05
  • JS模板实现方法

    JS模板实现方法

    我们在使用JS渲染DOM时，一般使用字符串创建DOM然后附加到父元素上，如果附加的DOM是动态易变的，那需要在函数中写大量逻辑。如果在控件实现过程中，这带来的问题更为严重。
    2013-04-04
  • 基于Bootstrap重置输入框内容按钮插件

    基于Bootstrap重置输入框内容按钮插件

    pureClearButton是一款基于Bootstrap的非常实用的用于清空和重置input输入框内容的jQuery按钮插件，感兴趣的小伙伴们可以参考一下
    2016-05-05
  • JavaScript中剩余参数的使用详解

    JavaScript中剩余参数的使用详解

    JavaScript中的剩余参数一般使用在**赋值号右侧,或具有迭代属性的数组、函数和对象,这篇文章主要为大家介绍了JavaScript中剩余参数的具体应用,需要的可以参考下
    2023-11-11
  • Three.js使用OrbitControls后修改相机旋转方向无效解决办法

    Three.js使用OrbitControls后修改相机旋转方向无效解决办法

    three.js是用javascript写的基于webGL的第三方3D库,下面这篇文章主要给大家介绍了关于Three.js使用OrbitControls后修改相机旋转方向无效的解决办法,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2024-01-01
  • JS弹出居中的DIV的代码

    JS弹出居中的DIV的代码

    一直都在想怎么样使弹出的DIV能在任何时候都是居中显示的，刚开始的时候是用CSS样式直接定义好层的位置，但是当页面很长的时候，或是浏览器窗口大小不是固定的时候就不能正确的显示，所以只好用JS来控制DIV的显示位置。
    2008-06-06

最新评论