开源pull-to-reload-网页端实现下拉刷新开源库
adb_shell
8年前
<h2>:point_up: :point_down: pull-to-reload</h2> <p>This is a pull to refresh implementation for the web. Designed to work with both mobile and desktop devices. Fits nicely with web-apps or single-page applications (SPA). <em>Configurable to the seventh degree.</em></p> <h2>:cactus: Preview</h2> <p style="text-align: center;"><img src="https://simg.open-open.com/show/17312ee427a8fea8c315be282ff27482.gif"></p> <h3>Demo:</h3> <p><a href="/misc/goto?guid=4959740429524392797" rel="nofollow,noindex">https://erlendellingsen.github.io/pull-to-reload/</a></p> <h2>Install</h2> <h3>NPM (Recommended)</h3> <p>npm install pull-to-reload</p> <h3>Direct ( <a href="/misc/goto?guid=4959740429616285926" rel="nofollow,noindex">Download</a> )</h3> <p>Add pull-to-reload.js to your project.</p> <h2>:herb: Usage</h2> <p>Quick example:</p> <p>Html</p> <pre> <div id="ptr"> ... </div> <div id="content"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores doloribus harum sed odit optio, fuga nam modi quod beatae? Tempore sunt molestiae, soluta quas unde exercitationem, modi accusamus pariatur reiciendis! </div></pre> <p>Javascript</p> <pre> $(document).ready(function(){ var ptr = new PullToReload({ 'callback-loading': function(){ setTimeout(function(){ ptr.loadingEnd(); }, 5000); } }); });</pre> <p>Available options:</p> <pre> this.opts = { 'refresh-element': 'ptr', //Required 'content-element': 'content', //Required 'border-height': 1, 'height': 80, 'font-size': '30px', 'threshold': 20, 'pre-content': '...', 'loading-content': 'Loading...', 'callback-loading': function(){ setTimeout(function(){ self.loadingEnd(); }, 1000); } //Required }</pre> <h2>:paperclip: Dependencies</h2> <p><em>None</em> :fire:</p> <h2>�� Contributors</h2> <ul> <li>NathanHeffley</li> </ul> <h2>:muscle|type_4: Contribute</h2> <p>If you'd like to contribute to this project you can do so by creating a <em>fork</em> and send in a <em>pull-request</em> .</p> <p>Make sure to write detailed comments and state your changes when sending in a PR. Keep the code style equal to the current.</p> <p>Contributions are very much appreciated :heart_eyes: !</p> <h2>License</h2> <p>As most of my other projects, this project is licensed as <strong>MIT</strong> .</p> <p> </p> <p> </p> <p> </p>