使用ionic实现下拉刷新步骤详解-js教程-PHP中文网

首页

web前端

js教程

使用ionic实现下拉刷新步骤详解

php中世界最好的语言

May 30, 2018 pm 01:53 PM

ionic 下拉刷新

这次给大家带来使用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>

登录后复制

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

热AI工具

热工具

热门话题

gmail邮箱登陆入口在哪里

7533

CakePHP 教程

1379

steam的账户名称是什么格式

win11激活密钥永久

NYT连接提示和答案

显示更多

Related knowledge

在 iPhone 上刷新网页的 6 种方法 Feb 05, 2024 pm 02:00 PM

当您在iPhone上浏览网页时，加载的内容会暂时存储，只要浏览器应用保持打开状态。然而，网站会定期更新内容，因此刷新页面是清除旧数据并查看最新发布内容的有效方式。这样，您可以始终获得最新的信息和体验。如果您想在iPhone上刷新页面，以下帖子将向您解释所有方法。如何在Safari上刷新网页[4种方法]有几种方法可以刷新您在iPhone上的Safari浏览器App上查看的页面。方法1：使用“刷新”按钮刷新您在Safari浏览器上打开的页面的最简单方法是使用浏览器标签栏上的“刷新”选项。如果Safa

F5刷新密钥在Windows 11中不起作用 Mar 14, 2024 pm 01:01 PM

您的Windows11/10PC上的F5键是否无法正常工作？F5键通常用于刷新桌面或资源管理器或重新加载网页。然而，我们的一些读者报告说，F5键正在刷新他们的计算机，并且无法正常工作。如何在Windows11中启用F5刷新？要刷新您的WindowsPC，只需按下F5键即可。在某些笔记本电脑或台式机上，您可能需要按下Fn+F5组合键才能完成刷新操作。为什么F5刷新不起作用？如果按下F5键无法刷新您的电脑或在Windows11/10上遇到问题，可能是由于功能键被锁定所致。其他潜在原因包括键盘或F5键

如何快速刷新网页？ Feb 18, 2024 pm 01:14 PM

页面刷新在我们日常的网络使用中非常常见，当我们访问一个网页后，有时候会遇到一些问题，比如网页加载不出来或者显示不正常等。这时候我们通常会选择刷新页面来解决问题，那么如何快速地刷新页面呢？下面我们就来探讨一下页面刷新的快捷键。页面刷新快捷键是一种通过键盘操作来快速刷新当前网页的方法。在不同的操作系统和浏览器中，页面刷新的快捷键可能有所不同。下面我们以常见的W

react页面传值刷新后值消失怎么办 Dec 29, 2022 am 11:11 AM

react页面传值刷新后值消失的解决办法：1、刷新页面，查看state里面的数据是否会清空；2、通过“const name = location.query.name;const id = location.query.id;”方法在跳转链接中增加参数，即可在实现传参的同时刷新页面后数据不会丢失。

使用Python和Ionic构建混合移动应用程序 Jun 17, 2023 pm 12:20 PM

移动应用程序是当今数字化生态系统中非常必需的一部分。与传统的原生应用程序不同，混合应用程序是基于Web技术开发的，并利用框架来呈现其用户界面，因此可以同时运行于多个平台和设备上。本文将介绍如何使用Python和Ionic开发混合移动应用程序。Python是一种高级编程语言，主要用于数据分析、Web开发、人工智能和大数据处理等领域。Ionic是一个流行的移动应

键盘刷新快捷键是哪个 Feb 25, 2024 pm 10:38 PM

键盘刷新快捷键是哪个随着电脑技术的发展，键盘成为我们日常工作和生活中不可或缺的设备。键盘的功能远不止输入文字，它也常常用来操作电脑的各种功能，提高我们的工作效率。而键盘的快捷键更是让我们能够更快速、便捷地完成各种操作。在平时使用电脑的过程中，我们经常会遇到需要页面刷新的情况。当我们打开网页或者软件运行时，有时候页面会出现卡顿或者无法加载的情况，这时候刷新页面

如何在Vue项目中使用路由实现页面刷新和缓存控制？ Jul 22, 2023 am 11:13 AM

如何在Vue项目中使用路由实现页面刷新和缓存控制？在Vue项目开发中，使用路由实现页面刷新和缓存控制是非常常见的需求。本文将介绍如何在Vue项目中使用路由来实现页面刷新和缓存控制，并给出相应的代码示例。路由配置首先，在Vue项目中需要使用vue-router来进行路由配置。可以通过npm安装vue-router，并在main.js中进行引入和配置。impor

win11右键刷新的方法 Dec 28, 2023 pm 02:29 PM

刷新是我们使用电脑时经常会进行的操作，通过刷新可以快速显示我们对界面、显示、图标等属性的设置情况，但是很多朋友在使用win11时发现右键菜单中没有刷新了，其实这是因为win11增加了一个菜单，需要先进入才可以刷新。win11怎么右键刷新1、在win11系统中，右键菜单进行了更改，我们右键点击空白处将无法找到刷新。2、取而代之的是，我们需要在右键菜单中找到最下方的“showmoreoptions”3、进入“showmoreoptions”之后，就可以找到刷新了。4、此外，其实我们不需要使用右键刷新

See all articles

使用ionic实现下拉刷新步骤详解

热AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

热门文章

热工具

记事本++7.3.1

SublimeText3汉化版

禅工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

热门话题