2. 程式人生 > >Angular JS 上拉重新整理，下拉載入

Angular JS 上拉重新整理，下拉載入

阿新 • • 發佈：2019-02-01

前言：最近在做一個專案用的Angular1.x 寫了一些頁面，現在遇到一個問題，需要實現列表頁面的下拉重新整理及上拉載入。於是乎進行了各種百度，剛開始搜的是“js 上拉重新整理下拉載入”，可是發現搜出來的都是jq ajax 請求資料，與現在的angular載入資料的方式有所區別，顯然是用著是不太合適的。接著百度了“angular 上拉重新整理下拉載入”，開啟一看發現根本看不懂，無意間發現了《ionic》（之前從來沒見過，angular也是自學的），寫這個文章是為了讓自己以後遇到這種情況時可以參考，整合一下自己所查到的，方便你我。

ionic 簡介

ionic 是一個強大的 HTML5 應用程式開發框架(HTML5 Hybrid Mobile App Framework )。 可以幫助您使用 Web 技術，比如 HTML、CSS 和 Javascript 構建接近原生體驗的移動應用程式。

ionic 主要關注外觀和體驗，以及和你的應用程式的 UI 互動，特別適合用於基於 Hybird 模式的 HTML5 移動應用程式開發。

ionic是一個輕量的手機UI庫，具有速度快，介面現代化、美觀等特點。為了解決其他一些UI庫在手機上執行緩慢的問題，它直接放棄了IOS6和Android4.1以下的版本支援，來獲取更好的使用體驗。

ionic 特性

  • ionic 基於Angular語法，簡單易學。
  • ionic 是一個輕量級框架。
  • ionic 完美的融合下一代移動框架，支援 Angularjs 的特性， MVC ，程式碼易維護。
  • ionic 提供了漂亮的設計，通過 SASS 構建應用程式，它提供了很多 UI 元件來幫助開發者開發強大的應用。
  • ionic 專注原生，讓你看不出混合應用和原生的區別
  • ionic 提供了強大的命令列工具。
  • ionic 效能優越，執行速度快。

首先頭部需要引入以下檔案（如專案中引入以下檔案，則不用引入angular.js，如果引入angular.js重新整理載入無效）

<link href="https://cdn.bootcss.com/ionic/1.3.2/css/ionic.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/ionic/1.3.2/js/ionic.bundle.min.js"></script>

下拉重新整理

<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>菜鳥教程(runoob.com)</title>
<link href="https://cdn.bootcss.com/ionic/1.3.2/css/ionic.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/ionic/1.3.2/js/ionic.bundle.min.js"></script>
<script type="text/javascript">
angular.module('starter', ['ionic']).run(function($ionicPlatform) {
  $ionicPlatform.ready(function() {
    // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
    // for form inputs)
    if(window.cordova && window.cordova.plugins.Keyboard) {
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
    }
    if(window.StatusBar) {
      StatusBar.styleDefault();
    }
  });
}).controller('actionsheetCtl', ['$scope', '$timeout', '$http', function($scope, $timeout, $http) {
  $scope.items = [{
    "name": "HTML5"
  }, {
    "name": "JavaScript"
  }, {
    "name": "Css3"
  }];
  $scope.doRefresh = function() {
    $http.get('http://www.runoob.com/try/demo_source/item.json') //注意改為自己本地的地址，不然會有跨域問題
      .success(function(newItems) {
        $scope.items = newItems;
      }).finally(function() {
        $scope.$broadcast('scroll.refreshComplete');
      });
  };
}])
</script>
</head>
<body ng-app="starter" ng-controller="actionsheetCtl">
<ion-pane>
  <ion-content>
    <ion-refresher pulling-text="下拉重新整理" on-refresh="doRefresh()"></ion-refresher>
    <ion-list>
      <ion-item ng-repeat="item in items" ng-bind="item.name"></ion-item>
    </ion-list>
  </ion-content>
</ion-pane>
</body>
</html>

上拉載入

以下程式碼僅供參考

<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>菜鳥教程(runoob.com)</title>
<link href="https://cdn.bootcss.com/ionic/1.3.2/css/ionic.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/ionic/1.3.2/js/ionic.bundle.min.js"></script>
<script type="text/javascript">
angular.module('starter', ['ionic']).run(function($ionicPlatform) {
  $ionicPlatform.ready(function() {
    // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
    // for form inputs)
    if(window.cordova && window.cordova.plugins.Keyboard) {
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
    }
    if(window.StatusBar) {
      StatusBar.styleDefault();
    }
  });
}).controller('actionsheetCtl', ['$scope', '$timeout', '$http', function($scope, $timeout, $http) {
  $scope.items = [{
    "name": "HTML5"
  }, {
    "name": "JavaScript"
  }, {
    "name": "Css3"
  }];
  $scope.hasMore = false;
  $scope.doRefresh = function() {
    $scope.pagenum = 1;//每次重新整理都是第一頁
    $http({
	  method: 'get',
	  url: IP + 'activity',
	  params: {
		'pagenum': $scope.pagenum,//第幾頁
		'pagesize': $scope.pagesize//一頁幾條
	  }
	}).then(function successCallback(response) {
	   if(有資料){
         $scope.hasMore = true;
       }else {
         $scope.hasMore = false;//沒有資料阻止上拉載入
       }
	}, function errorCallback(response) {
	  alert('請求引數錯誤！');
	  return false;
	}).finally(function() {
	  $scope.$broadcast('scroll.infiniteScrollComplete');//請求成功之後載入事件結束
	});
  };
  $scope.loadMore= function() {
    $scope.pagenum += 1;
    $http({
	  method: 'get',
	  url: IP + 'activity',
	  params: {
		'pagenum': $scope.pagenum,
		'pagesize': $scope.pagesize
	  }
	}).then(function successCallback(response) {
	  if(有資料){
        $scope.hasMore = true;
      }else {
        $scope.hasMore = false;//沒有資料阻止上拉載入
      }
	}, function errorCallback(response) {
	  alert('請求引數錯誤！');
	  return false;
	}).finally(function() {
	  $scope.$broadcast('scroll.infiniteScrollComplete');//請求成功之後載入事件結束
	});
  };
}])
</script>
</head>
<body ng-app="starter" ng-controller="actionsheetCtl">
<ion-pane>
  <ion-content>
    <ion-refresher pulling-text="下拉重新整理" on-refresh="doRefresh()"></ion-refresher>
    <ion-list>
      <ion-item ng-repeat="item in items" ng-bind="item.name"></ion-item>
    </ion-list>
    <ion-infinite-scroll ng-if='hasMore' on-infinite="loadMore()" distance="1%"></ion-infinite-scroll>
  </ion-content>
</ion-pane>
</body>
</html>

最後發現一個bug：頁面載入就會執行一次下拉載入方法

相關推薦

Angular JS 上拉重新整理，下拉載入

前言：最近在做一個專案用的Angular1.x 寫了一些頁面，現在遇到一個問題，需要實現列表頁面的下拉重新整理及上拉載入。於是乎進行了各種百度，剛開始搜的是“js 上拉重新整理下拉載入”，可是發現搜出來的都是jq ajax 請求資料，與現在的angular載入資料的方式有所區

用vue-scroller做上拉重新整理，下拉載入的模板（簡單明瞭，通用）

1.首先下外掛,並在你的vue專案中引人 npm i vue-scroller -D import VueScroller from 'vue-scroller 2.Vue.use(VueScroller )（這一步別忘啦） 3.在你需要做上拉重新整理，下拉載入的地方加上<scroll

OC 建立TableView基類並結合MJRefresh實現上拉重新整理，下拉載入

1.建立繼承自UITableView的基類BaseTableView: #import <UIKit/UIKit.h> @class BaseTableView; @protocol BaseTableViewDelegate <NSObject> @option

RecyclerView上拉重新整理，下拉載入

Activity介面方法 protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_mai

輪播圖、pulltofresh上拉重新整理，下拉載入

@輪播圖、pulltofresh上拉重新整理，下拉載入TOC import android.os.Bundle; import android.os.Handler; import android.os.Message; import android.support.v4.view.Vi

mint-ui 上拉重新整理，下拉載入

export default { data() { return { list: [], allLoaded: true, bottomStatus: "", wrapperHeight: 0, topStatus: "",

React Native 一個小專案其中一些主要功能實現 （頂部導航欄（可滑動）,網路解析，上拉重新整理，下拉載入）

//網路解析 import React, { Component } from "react"; import { View, Text, TouchableOpacity } from "react-native"; import RefreshListView, { Re

多條目載入 +上拉重新整理，下拉載入

//*Afragment->XListView 重新整理 載入 public class AFragment extends Fragment implements XListView.IXListViewListener { private String

Xrecycleview上拉重新整理，下拉載入

implementation 'com.jcodecraeer:xrecyclerview:1.3.2' Android studio3.0之後需要結局版本衝突 configurations.all { resolutionStrategy.eachDependency

mint ui 上拉重新整理，下拉載入問題

1.最外層包一層div，一定要有高度。2.mt-loadmore ,該外掛會預設自動載入一次，在頁面首次載入的時候。3.在載入成功後，並且是最後一頁時，要把allLoaded 設定為false；如果不是最後一頁，要設為true。大致程式碼如下：<div class="m

(再次更新)打造RecyclerView萬能介面卡，上拉重新整理，下拉載入

入行幾個月了，一直想自己封裝一些類，剛好遇到了這個問題，現在跟大家分享。 注意點 1 泛型擦除 2 需要防止型別轉換異常 github地址：https://github.com/zw21544182/MyBaseDemo （裡面還有部分FileUtil

混合開發中遇到的上拉重新整理，下拉載入的問題

上拉載入遇到的問題：        iscroll: 可以實現上下拉重新整理，載入，效果比較差，可是在頁面上只能上下滑動，不能左右滑動，如果你的頁面嵌入到客戶端的tab底下，就會阻止客戶端的左右滑動                    如果想要實現左右切換，就得把isc

mpvue上拉重新整理，下拉載入

第一種 重點：不要用scroll-view 效果 main.json { "navigationBarTitleText": "", "enablePullDownRefresh": true,//開啟下拉重新整理 "backgroundTextS

xamarin ios pullRefresh 下拉重新整理，下拉載入更多

如果用tableviewcontroller 下拉重新整理會自帶，而且tableview 會自動適應螢幕。這樣做的話這個介面的內容就要完全用cell承載了。 tableview pullRefresh 主要就是需要需要做下拉載入更多，這種需求，本人曾用兩種的辦法解決。題外

分頁， 上拉重新整理、下拉載入。

一、自定義listview package com.fragment.home; import android.content.Context; import android.util.AttributeSet; import android.view.MotionEvent; impor

基於React Native官方元件FlatList，增加可定製化“下拉重新整理”、“下拉載入更多”元件API的新列表元件react-native-refresh-loadmore-flatlist

react-native-refresh-loadmore-flatlist 基於React Native官方元件FlatList，增加可定製化“下拉重新整理”、“下拉載入更多”元件API的新列表元件，具體實現功能如下： 自定義下拉重新整理元件API 自定義上拉Lo

微信小程式上拉重新整理和下拉載入2種方法實現

微信小程式上拉重新整理和下拉載入2種方法實現，onPullDownRefresh，scroll-view使用 一、XXX.json開啟下拉重新整理 {    "enablePullDownRefresh": true }   二、XXX.js onP

prlibrary上拉重新整理、下拉載入

import android.os.Handler; import android.support.v7.app.AppCompatActivity; import android.os.Bundle; import android.widget.ListVi

【微信小程式】上拉重新整理和下拉載入

上拉重新整理和下拉載入有兩種方式可以實現： 1.使用scroll-view元件進行操作，使用自帶的scrolltoupper和scrolltolower事件可以實現。適合頁面區域性的上拉下拉。 附上

React-native 三方框架實現上拉重新整理、下拉載入網路請求以及跳轉先詳情頁面

首先 第一步 需要匯入三方的類庫 和跳轉詳情頁面 yarn add react-native-refresh-list-view //導包 import RefreshListView, { RefreshState } from “react-nati