(十三) 下拉刷新和上拉加载合集

本节知识点

• 下拉刷新和上拉加载合集。

第一步创建子页面

mui.init({ 
    subpages:[{ 
    url:pullrefresh-subpage-url,//下拉刷新内容页面地址 
    id:pullrefresh-subpage-id,//内容页面标志
     styles:{ top:subpage-top-position,//内容页面顶部位置,需根据实际页面布局计算，若使用标准mui导航，顶部默认为48px； .....//其它参数定义 
     } 
    }] 
});

第二部 内容页创建容器

<!--下拉刷新容器-->
<div id="pullrefresh" class="mui-content mui-scroll-wrapper">
    <div class="mui-scroll">
        <!--数据列表-->
        <ul class="mui-table-view mui-table-view-chevron">
            <li class="mui-table-view-cell">1</li>
        </ul>
    </div>
</div>

第三步:在mui.init()内同时设置上拉加载和下拉刷新 回调函数里面写获取到数据的需求

mui.init({
    pullRefresh: {
        container: '#pullrefresh',
        down: {
            contentdown : "下拉可以刷新",//可选，在下拉可刷新状态时，下拉刷新控件上显示的标题内容
            contentover : "释放立即刷新",//可选，在释放可刷新状态时，下拉刷新控件上显示的标题内容
            contentrefresh : "正在刷新...",//可选，正在刷新状态时，下拉刷新控件上显示的标题内容
            callback: downFn // 下拉执行函数
        },
        up: {
            contentrefresh: '正在加载...',
            callback: upFn // 上拉执行函数
        }
    }
});

第四部 写回调函数

downfn ,upFn

作者：我拥抱着我的未来
链接：https://www.jianshu.com/p/8873a229801a
來源：简书