Web Front-end
JS Tutorial
Detailed explanation of the steps to implement pull-down refresh using ionic
Detailed explanation of the steps to implement pull-down refresh using ionic
This time I will give you a detailed explanation of the steps to use ionic to implement pull-down refresh. What are the precautions for ionic to implement pull-down refresh? The following is a practical case, let’s take a look.
<!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>How to use Node.js to operate cookies to stay logged in
How to operate Node.js to use dialog boxes ngDialog
The above is the detailed content of Detailed explanation of the steps to implement pull-down refresh using ionic. For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
1386
52
6 Ways to Refresh Web Pages on iPhone
Feb 05, 2024 pm 02:00 PM
When you browse the web on your iPhone, the loaded content is temporarily stored as long as the browser app remains open. However, the website updates content regularly, so refreshing the page is an effective way to clear out old data and see the latest published content. This way, you always have the latest information and experiences. If you want to refresh the page on iPhone, the following post will explain you all the methods. How to Refresh Web Pages on Safari [4 Methods] There are several methods to refresh the pages you are viewing on the Safari App on iPhone. Method 1: Use the Refresh Button The easiest way to refresh a page you have open on Safari is to use the Refresh option on your browser's tab bar. If Safa
F5 refresh key not working in Windows 11
Mar 14, 2024 pm 01:01 PM
Is the F5 key not working properly on your Windows 11/10 PC? The F5 key is typically used to refresh the desktop or explorer or reload a web page. However, some of our readers have reported that the F5 key is refreshing their computers and not working properly. How to enable F5 refresh in Windows 11? To refresh your Windows PC, just press the F5 key. On some laptops or desktops, you may need to press the Fn+F5 key combination to complete the refresh operation. Why doesn't F5 refresh work? If pressing the F5 key fails to refresh your computer or you are experiencing issues on Windows 11/10, it may be due to the function keys being locked. Other potential causes include the keyboard or F5 key
How to quickly refresh a web page?
Feb 18, 2024 pm 01:14 PM
Page refresh is very common in our daily network use. When we visit a web page, we sometimes encounter some problems, such as the web page not loading or displaying abnormally, etc. At this time, we usually choose to refresh the page to solve the problem, so how to refresh the page quickly? Let’s discuss the shortcut keys for page refresh. The page refresh shortcut key is a method to quickly refresh the current web page through keyboard operations. In different operating systems and browsers, the shortcut keys for page refresh may be different. Below we use the common W
What should I do if the value disappears after the react page is refreshed?
Dec 29, 2022 am 11:11 AM
The solution to the value disappearing after the react page is refreshed: 1. Refresh the page and check whether the data in the state will be cleared; 2. Use the "const name = location.query.name; const id = location.query.id;" method By adding parameters to the jump link, you can pass the parameters and refresh the page without losing the data.
What is the keyboard refresh shortcut key?
Feb 25, 2024 pm 10:38 PM
What is the keyboard refresh shortcut key? With the development of computer technology, the keyboard has become an indispensable device in our daily work and life. The function of the keyboard goes far beyond entering text. It is also often used to operate various functions of the computer and improve our work efficiency. The keyboard shortcuts allow us to complete various operations more quickly and conveniently. In the daily use of computers, we often encounter situations where we need to refresh the page. When we open a web page or run software, sometimes the page will freeze or fail to load. At this time, refresh the page.
Build hybrid mobile apps with Python and Ionic
Jun 17, 2023 pm 12:20 PM
Mobile apps are a very necessary part of today’s digital ecosystem. Unlike traditional native applications, hybrid applications are developed based on web technologies and utilize frameworks to present their user interfaces, so they can run on multiple platforms and devices simultaneously. This article will introduce how to develop hybrid mobile applications using Python and Ionic. Python is a high-level programming language mainly used in fields such as data analysis, web development, artificial intelligence and big data processing. Ionic is a popular mobile application
How to use routing to implement page refresh and cache control in a Vue project?
Jul 22, 2023 am 11:13 AM
How to use routing to implement page refresh and cache control in a Vue project? In Vue project development, it is a very common requirement to use routing to implement page refresh and cache control. This article will introduce how to use routing to implement page refresh and cache control in Vue projects, and give corresponding code examples. Routing configuration First, you need to use vue-router for routing configuration in the Vue project. vue-router can be installed through npm and introduced and configured in main.js. impor
How to right-click refresh in win11
Dec 28, 2023 pm 02:29 PM
Refreshing is an operation we often perform when using computers. Refreshing can quickly display our settings for interface, display, icons and other properties. However, many friends find that there is no refresh in the right-click menu when using win11. In fact, this is because win11 A menu has been added, which needs to be entered before it can be refreshed. How to right-click refresh in win11 1. In win11 system, the right-click menu has been changed, and we will not be able to find refresh when we right-click on a blank space. 2. Instead, we need to find "showmoreoptions" at the bottom of the right-click menu. 3. After entering "showmoreoptions", you can find refresh. 4. In addition, we actually don’t need to use right-click to refresh
