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


Posted in Javascript onMay 11, 2017

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

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

Javascript 相关文章推荐
json-lib出现There is a cycle in the hierarchy解决办法
Feb 24 Javascript
js修改input的type属性及浏览器兼容问题探讨与解决
Jan 23 Javascript
js一般方法改写成面向对象方法的无限级折叠菜单示例代码
Jul 04 Javascript
使用js画图之画切线
Jan 12 Javascript
jQuery实现动态表单验证时文本框抖动效果完整实例
Aug 21 Javascript
41个Web开发者必须收藏的JavaScript实用技巧
Jul 22 Javascript
JS实现页面载入时随机显示图片效果
Sep 07 Javascript
走进javascript——不起眼的基础,值和分号
Feb 24 Javascript
js随机生成一个验证码
Jun 01 Javascript
JS原生数据双向绑定实现代码
Aug 14 Javascript
微信小程序实现YDUI的ScrollNav组件
Feb 02 Javascript
Vue.use()在new Vue() 之前使用的原因浅析
Aug 26 Javascript
vue2的todolist入门小项目的详细解析
May 11 #Javascript
ionic实现底部分享功能
May 11 #Javascript
学习使用Bootstrap栅格系统
May 11 #Javascript
jQuery实现的简单在线计算器功能
May 11 #jQuery
学习使用Bootstrap页面排版样式
May 11 #Javascript
Angularjs 与 bower安装和使用详解
May 11 #Javascript
学习使用Bootstrap输入框、导航、分页等常用组件
May 11 #Javascript
You might like
PHP编程与应用
2006/10/09 PHP
WampServer下安装多个版本的PHP、mysql、apache图文教程
2015/01/07 PHP
form中限制文本字节数js代码
2007/06/10 Javascript
细品javascript 寻址,闭包,对象模型和相关问题
2009/04/27 Javascript
javascript与asp.net(c#)互相调用方法
2009/12/13 Javascript
Javascript 静态页面实现随机显示广告的办法
2010/11/17 Javascript
深入浅析JavaScript中with语句的理解
2016/05/12 Javascript
微信小程序实现循环动画效果
2018/07/16 Javascript
微信小程序实现点赞、取消点赞功能
2018/11/02 Javascript
解决vue组件props传值对象获取不到的问题
2019/06/06 Javascript
JavaScript使用localStorage存储数据
2019/09/25 Javascript
Vue 中使用富文本编译器wangEditor3的方法
2019/09/26 Javascript
vue实现权限控制路由(vue-router 动态添加路由)
2019/11/04 Javascript
js判断鼠标移入移出方向的方法
2020/06/24 Javascript
[02:33]2018 DOTA2亚洲邀请赛回顾视频 再次拾起那些美妙的时刻
2018/04/10 DOTA
Python中的filter()函数的用法
2015/04/27 Python
Python使用爬虫猜密码
2016/02/19 Python
使用Python读取大文件的方法
2018/02/11 Python
使用Django开发简单接口实现文章增删改查
2019/05/09 Python
Python爬取爱奇艺电影信息代码实例
2019/11/26 Python
如何使用repr调试python程序
2020/02/28 Python
通过python调用adb命令对App进行性能测试方式
2020/04/23 Python
python批量处理多DNS多域名的nslookup解析实现
2020/06/28 Python
基于opencv实现简单画板功能
2020/08/02 Python
使用canvas压缩图片大小的方法示例
2019/08/02 HTML / CSS
全球性的奢侈品梦工厂:Forzieri(福喜利)
2019/02/20 全球购物
DOUGLAS波兰:在线销售香水和化妆品
2020/07/05 全球购物
连锁酒店店长职责范本
2014/02/13 职场文书
《只有一个地球》教学反思
2014/02/14 职场文书
《北大荒的秋天》教学反思
2014/04/14 职场文书
人民调解员先进事迹材料
2014/05/08 职场文书
林肯就职演讲稿
2014/05/19 职场文书
媒体宣传策划方案
2014/05/25 职场文书
小学运动会演讲稿
2014/08/25 职场文书
详解Js模块化的作用原理和方案
2021/04/29 Javascript
python开发人人对战的五子棋小游戏
2022/05/02 Python