HTML Pull-to-Refresh and Pull-up-to-Load Plugin Refresher 3.0

Add-ons

2026-07-26 00:16 3 次浏览 • 0 次下载 176.3KB

HTML Pull-to-Refresh and Pull-up-to-Load Plugin Refresher 3.0

Plugin Description: Based on iScroll, this plugin simulates the pull-down-to-refresh and pull-up-to-load effects of an app's ListView. For the best viewing experience, use Chrome's device emulator.

1. First, include the required files

1	`<link rel="stylesheet"` `href="pullToRefresh.css"/>`

<script src="js/iscroll.js"></script>
<script src="js/pullToRefresh.js"></script>

2. Add the required HTML with the following structure

<div id="wrapper">
  <ul>
    <li>row 10</li>
    <li>row 9</li>
    <li>row 8</li>
    <li>row 7</li>
    <li>row 6</li>
    <li>row 5</li>
    <li>row 4</li>
    <li>row 3</li>
    <li>row 2</li>
    <li>row 1</li>
  </ul>
</div>

3. Initialize the plugin

refresher.init({
    id:"wrapper",
    pullDownAction:Refresh,                                                            
    pullUpAction:Load                                                                             
    });    
    function Refresh() {       
    // <-- Simulate network congestion, remove setTimeout from production!
        wrapper.refresh();/****remember to refresh after  action completed！ --example-yourId.refresh(); ----| ****/
    } 
     
    function Load() {
    // <-- Simulate network congestion, remove setTimeout from production!
    wrapper.refresh();/****remember to refresh after action completed！！！   -example--yourId.refresh(); --- ****/
    }