欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

基于ionic实现下拉刷新功能

程序员文章站 2022-05-05 11:48:26
本文实例为大家分享了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>

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