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

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

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <link href="jqm/stylesheets/jquery.mobile-1.3.1.css" rel="stylesheet" type="text/css" />
    <link href="jqm/stylesheets/jquery.mobile.iscrollview.css" rel="stylesheet" type="text/css" />
    <link href="jqm/stylesheets/jquery.mobile.iscrollview-pull.css" rel="stylesheet"
        type="text/css" />

    <script src="jqm/javascripts/jquery-1.9.1.min.js" type="text/javascript"></script>

    <script src="jqm/javascripts/jquery.mobile-1.3.1.min.js" type="text/javascript"></script>

    <script src="jqm/javascripts/iscroll.js" type="text/javascript"></script>

    <script src="jqm/javascripts/jquery.mobile.iscrollview.js" type="text/javascript"></script>

    <script type="text/javascript" charset="utf-8">
        $(function() {
            getdata();

        });
        function getdata() {
            var json = [{ name: "我是程式猿1", age: 20 }];
            var html = "";
            if (json != "") {
                for (var i = 0; i < json.length; i++) {
                    html += "<li><a href=''>";
                    html += "<h3>" + json[i].name + "</h3>";
                    html += "<p>" + json[i].age + "</p>";
                    html += "</a></li>";


                }
            }
            $("#list").append(html);
            $('#list').listview('refresh');
        }      
    </script>

    <script type="text/javascript" charset="utf-8">

        (function pullPagePullImplementation($) {
            "use strict";
            var listSelector = "div.pull-demo-page div.mycolset",
      lastItemSelector = listSelector;



            function gotPullDownData(event, data) {
                var iscrollview = data.iscrollview;
                //下拉載入資料
                getdata();
                iscrollview.refresh(null, null,
                  $.proxy(function afterRefreshCallback(iscrollview) {
                      this.scrollToElement(lastItemSelector, 400);
                  }, iscrollview));

            }

            function gotPullUpData(event, data) {
                var iscrollview = data.iscrollview;
                //上拉載入資料
                getdata();
                iscrollview.refresh(null, null,
      $.proxy(function afterRefreshCallback(iscrollview) {
          this.scrollToElement(lastItemSelector, 400);
      }, iscrollview));
            }

            function onPullDown(event, data) {
                setTimeout(function fakeRetrieveDataTimeout() {
                    gotPullDownData(event, data);
                },
      1500);
            }

            // Called when the user completes the pull-up gesture.
            function onPullUp(event, data) {
                setTimeout(function fakeRetrieveDataTimeout() {
                    gotPullUpData(event, data);
                },
      1500);
            }

            // Set-up jQuery event callbacks  
            $(document).delegate("div.pull-demo-page", "pageinit",

    function bindPullPagePullCallbacks(event) {
        $(".iscroll-wrapper", this).bind({
            iscroll_onpulldown: onPullDown,
            iscroll_onpullup: onPullUp
        });
    });


        } (jQuery));



    </script>

</head>
<body>
    <div class="pull-demo-page" data-role="page">
        <div data-iscroll="" data-role="content">
            <div class="iscroll-pulldown">
                <span class="iscroll-pull-icon"></span><span class="iscroll-pull-label" data-iscroll-loading-text="載入資料"
                    data-iscroll-pulled-text="載入資料"></span>
            </div>
            <ul data-role="listview" id="list" data-inset="true">
            </ul>
            <div class="iscroll-pullup">
                <span class="iscroll-pull-icon"></span><span class="iscroll-pull-label" data-iscroll-loading-text="載入資料"
                    data-iscroll-pulled-text="載入資料"></span>
            </div>
        </div>
    </div>
</body>
</html>

上拉重新整理效果圖

下拉重新整理效果圖

原始碼下載地址

http://download.csdn.net/detail/wf001015/9824775

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

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

JQuery外掛iScroll實現下拉重新整理，滾動翻頁特效

初始化/** * 初始化iScroll控制元件 */ function loaded() { pullDownEl = document.getElementById('pullDown'); pullDownOffset = pullDownEl.offsetHeight; p

TwinklingRefreshLayout 簡單實現實現下拉重新整理，上拉載入

支援下拉重新整理和上拉載入的RefreshLayout,自帶越界回彈效果，支援RecyclerView,AbsListView,ScrollView,WebView 本文以ListView為例，實現上拉重新整理和下拉載入，其他的就不在舉例，原理是一樣的。先看一下效果（效

Android LRecyclerView實現下拉重新整理，滑動到底部自動載入更多

隨著功能的不斷優化，框架中的類或者介面名字會有變動，為了獲取準確的使用方法，請參考最新的說明文件：點此檢視。簡介LRecyclerView是支援addHeaderView、 addFooterView、下拉重新整理、分頁載入資料的RecyclerView。它對 Rec

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

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

Mui 下拉重新整理，重新整理完成功能實現

Mui中，正在重新整理後，就直接回彈了，沒有重新整理完成這個過程，然後我就在中間添加了一個過程。程式碼如下： //-----------日期格式化------------- function formatDate(now) { var toLocaleDateString = now

實現下拉重新整理，上拉載入可自定義各種動畫

一、使用說明 1、UltimateRefreshView 支援ListView,GridView,ScrollView，WebVIew，RecyclerView（只支援LinearLayoutManager）. 2、佈局使用： 1 2 3 4 5 6 7 8 9 1

功能強大的RecyclerView實現 (單/多子項佈局載入，上拉載入，下拉重新整理，左劃刪除)

先看效果，可以像普通recyclerView那樣只加載一種列表子項，也可以同時載入不同的列表子項，已經寫好了常用必備的功能：正常的適配渲染，上拉載入，下拉重新整理，左劃刪除。核心是XRefreshView+MultiTypeAdapter兩者組合使用，搭

VUE2 配合mint-ui實現自定義 loadmore(下拉重新整理，上拉更多)

<template> <div class="page-loadmore"> <h1 class="page-title">Pull up</h1> <p class="page-loadmore-de

解讀Google官方SwipeRefreshLayout控制元件原始碼，帶你揭祕Android下拉重新整理的實現原理

前言想必大家也發現，時下的很多App都應用了這個Google出品的SwipeRefreshLayout下拉重新整理控制元件，它以Material Design風格、適用場景廣泛，簡單易用等特性而獨步江湖。但在我們使用的過程中，不可避免地會發現一些bug，或者

jQuery選擇器----------jquery實現select下拉框的取值與賦值，設定選中的方法大全

// 1.判斷select選項中是否存在Value="paraValue"的Item function jsSelectIsExitItem(objSelect, objItemValue) { var isExit = false; for (var i = 0; i < objSelect.opt

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

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

XListView上拉載入下拉重新整理，第一個條目展示Banner輪播圖

佈局開始此處只有xlistview的佈局 <?xml version="1.0" encoding="utf-8"?> <android.support.constraint.ConstraintLayout xmlns:android="http://sch

使用jquery-weui製作的下拉重新整理和滾動載入

一、前期檔案中引入weui.min.css，jquery-weui.min.css，jquery-2.1.4.js，jquery-weui.min.js，fastclick.js這些檔案。二、html程式碼 <head> <meta charset="utf-8

關於antd-mobile中列表下拉重新整理PullToRefresh的使用

相信有很多小夥伴發現antd-mobile中的下拉重新整理元件，也發現例子挺難的，其實這個元件並沒有那麼複雜，只是demo例子不好理解，給大家提供一個簡單的demo，或許可以幫到你上拉重新整理下拉載入 - 因為它用react-dom做操作了，所以把react-dom也導進來 - rowID是每次的ID，

十月專案小結（Recycler下拉重新整理，上拉分頁載入）

Recycler上拉分頁載入、下拉重新整理該需求採用RecyclerView、SwipeRefreshLayout以及第三方外掛BRVAH結合使用方式完成，SwipeRefreshLayout完成下拉重新整理、BRVAH完成上拉分頁載入 build.gradle 配置說明

Android簡單的下拉重新整理，上拉載入

先匯入第三方的東西下載地址匯入後，就和你的專案聯絡起來佈局程式碼（activity_pull_to_refresh_action.xml） <?xml version="1.0" encoding="utf-8"?> <Lin

學習“javaScript+CSS+DIV實現下拉選單，實現表格變色”內容的筆記

實現下拉選單 <!DOCTYPE html> <html> <head> <title>下拉選單示例</title> <script language="javaScript">

html5+ 下拉重新整理

#pull { width: 24px; height: 100%; display: inline-block; margin: 0 1em; } #icon { height: 24px; vertical-align: middle;

ListView下拉重新整理具體實現

1、現在gitHub中有ListView的下拉重新整理的框架，不過個人手賤，還是自己做了一個，懂了很多東西，哎，又不是資料結構，只是一些基本的下拉東西，在此留給自己回憶的。 2、不適宜新人學習，因為我基本不載入圖片在這，只留給有基礎的人忘記重新整理的一些重要東西檢視。主佈局檔案：如果不

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

相關推薦