ajax+php實現無限下拉重新整理的功能

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

效果展示：
在這裡插入圖片描述

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    <script src="http://mydemo.wangchuangcode.cn/angular_reload/jquery-2.2.4.min.js"> 
</script>
    <script type="text/javascript" src="http://mydemo.wangchuangcode.cn/angular_reload/iscroll.js"></script>
</head>
<body>
<div id="wrapper">
    <div id="scroller">
        <ul>
            <li>往上拉我哦</li>
        </ul>
        <div 
 class="pull-loading">
            上拉載入
        </div>
    </div>
</div>
<script type="text/javascript">
    var myscroll = new iScroll("wrapper", {
        onScrollMove: function () { //拉動時
            //上拉載入
            if (this.y < this.maxScrollY) {
                $(".pull-loading" 
).html("釋放載入");
                $(".pull-loading").addClass("loading");
            } else {
                $(".pull-loading").html("上拉載入");
                $(".pull-loading").removeClass("loading");
            }
        },
        onScrollEnd: function () { //拉動結束時
            //上拉載入
            if ($(".pull-loading").hasClass('loading')) {
                $(".pull-loading").html("載入中...");
                pullOnLoad();
            }
        }
    });

    //上拉載入函式,ajax
    var num = 0;
    var page = 4; //每次載入4條
    function pullOnLoad() {
        setTimeout(function () {
            $.ajax({
                url: "{:url('index/ceshi')}",
                type: "get",
                dataType: 'json',
                success: function (data) {
                    var data_length = data.length;//資料的總長度
                    var remainder = data_length % page;//餘數
                    if ( data_length >= (num+page)){
                        for (var j = num; j < num + page; j++){
                            var text = data[j].nickname;
                            $("#scroller ul").append("<li>"+ text +"</li>");
                        }
                        num+=page;
                    }else if (remainder != 0 && data_length-num == remainder){
                        for (var j = num; j < num + remainder; j++){
                            var text = data[j].nickname;
                            $("#scroller ul").append("<li>"+ text +"</li>");
                        }
                        num+=page;
                    }else{
                        $('.pull-loading').html("沒有了喲");
                    }
                    myscroll.refresh();
                },
                error: function () {
                    console.log("出錯了");
                }
            });
            myscroll.refresh();
        }, 500);
    }
</script>
</body>
</html>

<?php
namespace app\index\controller;
use think\Controller;
use think\Request;
use think\Db;
use think\db\Query;
class Index extends Controller
{
    public function index()
    {
        return $this->fetch('index');
    }

    public function ceshi()
    {
        $data=Db::name('user')
            ->select();
        echo json_encode($data);
    }
}

ajax+php實現無限下拉重新整理的功能

效果展示： <!DOCTYPE html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scal

vue基於mint-ui元件loadmore實現上拉載入更多，下拉重新整理功能

這個是模擬手機寫的簡單樣式，不要在意這些細節，為了撐滿容器每次載入十二那就開始程式碼了 ==》先安裝 mint-ui 在main.js中引入mint-ui的css樣式： import 'mint-ui/lib/style.css' 在

SwipeRefreshLayout實現下拉重新整理功能

在Android5.0的v4包中，Google提供了SwipeRefreshLayout控制元件，用來執行下拉重新整理的效果。 XML： <?xml version="1.0" encoding="utf-8"?> <android.suppo

Android下拉重新整理完全解析教你如何一分鐘實現下拉重新整理功能

最近專案中需要用到ListView下拉重新整理的功能，一開始想圖省事，在網上直接找一個現成的，可是嘗試了網上多個版本的下拉重新整理之後發現效果都不怎麼理想。有些是因為功能不完整或有Bug，有些是因為使用起來太複雜，十全十美的還真沒找到。因此我也是放棄了在網上找現成程式碼的想法，

iscroll.js 移動端上拉載入，下拉重新整理功能實現

如下圖所示，我需要做一個上拉載入，下拉重新整理的功能：首先在 html 中引用這個外掛： <script src="/js/common/iscroll.js"></script> 然後插入我們的資料： <d

Xamarin. Android實現下拉重新整理功能

public class MvxPullToRefreshListView:PullToRefreshListView,PullToRefreshBase.IOnRefreshListener { public MvxPullToRefreshListView(Cont

自定義ViewGroup繼承FrameLayout 實現下拉重新整理功能

程式碼不多，註釋也不多，因為比較簡單效果圖貼程式碼 activity_refresh_head.xml (下拉重新整理的載入框) <?xml version="1.0" encoding="utf-8"?> <LinearLayout x

自定義ExpandableListView下拉重新整理功能簡單實現（這裡主要說自定義可下拉的功能）

ExpandableListView 筆記 ExpandableListVivew 是 ListView 的子類，它在普通 ListView 的基礎上進行了擴充套件，它把應用中的列表項分為幾組，每組裡又可包含多個列表項。 ExpandableListViv

Android探索之路：實現下拉重新整理功能

RefresrefreshableView = (RefreshableView) findViewById(R.id.refreshable_view);//找到相應的控制元件//下拉 refreshableView.setOnRefreshListener(new RefreshableV

使用jquery+ajax+php實現搜索框的功能

test .ajax 關鍵字焦點 pwd show span 知識庫 document 搜索框的原理：客戶端：輸入要搜索的關鍵字於文本框，然後文本框將關鍵字獲取，使用ajax發送請求到服務端，然後根據服務端返回來的信息顯示到一個div中服務端：接收傳過來的數據，然後在

詳解自主實現RecyclerView下拉重新整理、上拉載入、Header、Footer以及swiperefreshlayout的部分講解

年前年後的那段時間比較忙，忙的來忘了寫部落格。最近空閒了，有時間了，來看部落格發現有兩個來月沒有發文章了，對自己的沒有堅持先來幾個，部落格還是要寫的，以後會持續更新。廢話少說，網上關於列表控

JAVA EE 專案常用知識之AJAX技術實現select下拉列表聯動的兩種用法（讓你真正理解ajax）

ajax 下拉列表聯動的用法。 ajax的定義： AJAX 是一種用於建立快速動態網頁的技術。通過在後臺與伺服器進行少量資料交換，AJAX 可以使網頁實現非同步更新。這意味著可以在不重新載入整個網頁的情況下，對網頁的某部分進行更新。 ajax效果的一個例子：區域為

android 簡單上拉下拉重新整理功能

事件處理 @Override public boolean onTouch(View v, MotionEvent event) { float y = event.getY(); switch (event.getAction()) {

SwipeToLoadLayout實現Android下拉重新整理及上拉載入

最近一段時間需要對手上的專案進行重構，一方面等甲方對業務流程的需求，另一方面由於新配了電腦可以流暢的執行Android Studio了正好也閒著沒事就打算把UI重新搞一搞順便降低各個模組的耦合度，在實現列表的地方噁心到我了。因為之前一直用的的PullToRefresh在列

jquery mobile實現html5下拉重新整理，實現pc與phone的相容

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <m

android官方自帶下拉重新整理功能

最近想寫下拉重新整理功能，網上找的第三方框架最著名的pullToRefresh也早在2013年停止維護了，偶然間發現谷歌公司早已推出了自家的下拉重新整理功能，位於v4包中，效果請看下圖：

使用 android-Ultra-Pull-To-Refresh 實現 WebView 下拉重新整理

Layout： <?xml version="1.0" encoding="utf-8"?> <in.srain.cube.views.ptr.PtrClassicFrameLayout xmlns:android="http://schemas.a

JavaScript Ajax Json實現上下級下拉框聯動效果例項程式碼

最近嘗試做出一個部門和人員的下拉框聯動功能，部門和人員的對應關係是1:N 程式碼如下: <div class="forntName">部門</div> <div class="inpBox"> <select name="d

AJAX筆記-實現城市下拉列表聯動框

學習一門新技術不外乎掌握四個點（what、how、where、why）！一、什麼是AJAX?(what) 首先要了解什麼是同步？什麼是非同步的問題。同步就是當瀏覽器提交請求到伺服器時，伺服器必須要響應瀏覽器，這樣瀏覽器才能繼續傳送請求。簡單來說就

XRecyclerView實現RecyclerView下拉重新整理上來載入自己做了部分修改，使程式碼更簡潔易用

首先感謝開源作者 /** * Created by jianghejie on 15/11/26. */ 的無私奉獻我是在他的基礎上做的修改以前一直是用的XListView 可是測試發現有一個奇奇怪怪的BUG，我們還無法解決。最嚴重的是 XListV

ajax+php實現無限下拉重新整理的功能

相關推薦