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

ionic实现下拉刷新载入数据功能

 更新时间：2017年05月11日 10:31:24   作者：郭浩326  
这篇文章主要为大家详细介绍了ionic实现下拉刷新载入数据功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了ionic下拉刷新载入数据的具体代码，供大家参考，具体内容如下

<!DOCTYPE html>
<html ng-app="myApp">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
     content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <link rel="stylesheet" href="js/lib/ionic1/css/ionic.min.css" rel="external nofollow" >
  <script src="js/lib/ionic1/js/ionic.bundle.min.js"></script>
  <title>Title</title>
  <!--
  由于移动端的特殊性
    下拉刷新ion-refresher：移动端没有刷新的按钮~图标~可以操作的东西【浏览器的工具栏中有刷新的按钮】
    下拉加载ion-infinite-scroll ：移动端页面，显示的内容有限，优先加载显示用户能看到的内容部分，在用户拖动网页的过程中，【动态加载下面的内容；模拟了PC端的延迟加载】
-->
</head>
<body ng-controller="myCtrl">
<!--页面头部-->
<ion-header-bar class="bar-royal">
  <h1 class="title">我是标题</h1>
</ion-header-bar>
<!--内容-->
<ion-content>
  <!-- 1.添加下拉刷新的组件 -->
  <ion-refresher
      pulling-text="正在刷新页面数据..."
      on-refresh="doRefresh()">
  </ion-refresher>

  <!--ng-repent 渲染内容-->
<ul class="list">
  <li ng-repeat="g in goodses">
    <span ng-bind="g"></span>
  </li>
</ul>
</ion-content>
<!--页面底部-->
  <ion-footer-bar class="bar-royal">
    <h1 class="title">我是底部</h1>
  </ion-footer-bar>
<script>
  var app=angular.module("myApp",["ionic"]);
  app.controller("myCtrl",["$scope",function ($scope) {
    $scope.goodses=[];
    for(var i=0;i<50;i++){
      $scope.goodses.push(i+"我是首页展示")
    }
    $scope.doRefresh=function () {
      //下来载入数据
      $scope.goodses=[];
      for(var i=0;i<50;i++){
        $scope.goodses.push(i+"我是下拉载入****")
      }
      /*
       页面下拉刷新，其实就是延迟更改数据
       数据一旦被延迟更新，在Angular中我们通过$scope.$apply()进行脏数据检查，
       然后将数据同步 ionic中，要通过广播信号的方式，
       使用$scope.$broadcase("scroll.refreshComplete")告诉页面中的所有组件，
       数据已经刷新完成，可以重新加载数据
       */

      // 停止广播ion-refresher
      $scope.$broadcast('scroll.refreshComplete');
    }
  }])
</script>
</html>

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

您可能感兴趣的文章:

相关文章

  • 使用BootStrap实现表格隔行变色及hover变色并在需要时出现滚动条

    使用BootStrap实现表格隔行变色及hover变色并在需要时出现滚动条

    这篇文章主要介绍了使用BootStrap实现表格隔行变色及hover变色并在需要时出现滚动条效果,代码简单易懂，非常不错，具有参考借鉴价值，需要的朋友可以参考下
    2017-01-01
  • js贪吃蛇网页版游戏特效代码分享（挑战十关）

    js贪吃蛇网页版游戏特效代码分享（挑战十关）

    这篇文章主要为大家详细介绍了js贪吃蛇网页版游戏特效，游戏总共有十关，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2015-08-08
  • JavaScript Date 知识浅析

    JavaScript Date 知识浅析

    这篇文章主要介绍了JavaScript Date 知识，非常不错，具有参考借鉴价值，需要的朋友参考下吧
    2017-01-01
  • JS给Array添加是否包含字符串的简单方法

    JS给Array添加是否包含字符串的简单方法

    下面小编就为大家带来一篇JS给Array添加是否包含字符串的简单方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-10-10
  • Draggable Elements 元素拖拽功能实现代码

    Draggable Elements 元素拖拽功能实现代码

    虽说js框架到处都是, 都封装了很多实用的功能,能快速的让我们实现如动画,元素拖拽等功能, 不过由于好奇心的驱使, 有时想一探究竟, 看看一些功能是如何实现的
    2011-03-03
  • 修改layui的后台模板的左侧导航栏可以伸缩的方法

    修改layui的后台模板的左侧导航栏可以伸缩的方法

    今天小编就为大家分享一篇修改layui的后台模板的左侧导航栏可以伸缩的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09
  • 简单了解JavaScript弹窗实现代码

    简单了解JavaScript弹窗实现代码

    这篇文章主要介绍了简单了解JavaScript弹窗实现代码,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-05-05
  • 小程序点击图片实现自动播放视频

    小程序点击图片实现自动播放视频

    这篇文章主要为大家详细介绍了小程序点击图片实现自动播放视频，停止上一个视频播放，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2018-11-11
  • JS上传前预览图片实例

    JS上传前预览图片实例

    上传图片对图片进行一下预览，可以了解图片上传后大概会是什么样子，此功能用js实现，然后在fileupload控件的change事件中调用，这样当用fileupload选择完图片以后，图片就会自动显示出来了。功能很简单，却很实用。
    2013-03-03
  • JS对img进行操作(换图片/切图/轮换/停止)

    JS对img进行操作(换图片/切图/轮换/停止)

    JS对img进行操作包括:换图片/切图/轮换/停止轮换等等，在本文将逐一实现，感兴趣的朋友可以参考下哈，希望对你学习js知识有所帮助
    2013-04-04

最新评论