guid_start.md

快速开始

安装

NPM

npm install minirefresh

https://www.npmjs.com/package/minirefresh

GIT

git clone git://github.com/minirefresh/minirefresh.git

https://github.com/minirefresh/minirefresh

引入

<link rel="stylesheet" href="xxx/minirefresh.css" />
<script type="text/javascript" src="xxx/minirefresh.js"></script>

require引入

// 同时支持NPM与文件形式引入
var MiniRefreshTools = require('xxx/minirefresh.js');
require('xxx/minirefresh.css');

import引入

// debug下是.js dist下是.min.js
import MiniRefreshTools from 'minirefresh';
import 'minirefresh/dist/debug/minirefresh.css'

页面布局

<!-- minirefresh开头的class请勿修改 -->
<div id="minirefresh" class="minirefresh-wrap">
    <div class="minirefresh-scroll">
        
    </div>
</div>

初始化

// 引入任何一个主题后，都会有一个 MiniRefresh 全局变量
var miniRefresh = new MiniRefresh({
    container: '#minirefresh',
    down: {
        callback: function() {
            // 下拉事件
            
            miniRefresh.endDownLoading();
        }
    },
    up: {

        callback: function() {
            // 上拉事件
            
            // 注意，由于默认情况是开启满屏自动加载的，所以请求失败时，请务必endUpLoading(true)，防止无限请求
            miniRefresh.endUpLoading(true);
        }
    }
});

结束刷新

// 结束下拉刷新
miniRefresh.endDownLoading();

// 结束上拉加载
// 参数为true代表没有更多数据，否则接下来可以继续加载
miniRefresh.endUpLoading(true);