MUI框架的上拉加载和下拉刷新，回到顶部

目录

一、上拉加载和下拉刷新

1. 介绍

2. 初始化

3. 方法定义

4. 代码举例

二、回到顶部 

1. 滚动组件

2. 代码举例：

2.1. 需求：

2.2. 代码：

---

一、上拉加载和下拉刷新

1. 介绍

mui的上拉加载和下拉刷新类似，都属于pullRefresh插件，使用过程如下：

• 1、页面滚动到底，显示“正在加载...”提示（mui框架提供）
• 2、执行加载业务数据逻辑（开发者提供）
• 3、加载完毕，隐藏"正在加载"提示（mui框架提供）
• 4、没有更多数据加载时，结束加载，显示"没有更多数据了..."

开发者只需关心业务逻辑，实现加载更多数据即可。

2. 初始化

创建初始化容器：快捷方式：mrefreshContainer

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

通过mui.init方法中pullRefresh参数配置上拉加载各项参数：

            mui.init({
			  pullRefresh : {
			    container:'#refreshContainer',
			    down : { //下拉刷新数据
			      callback :pulldownRefresh //调用的方法
			    },
			    up : { //上拉加载更多
			      callback :pullupRefresh //调用的方法
			    }
			  }
			});

其他初始化配置参数请参考：上拉加载 · MUI

3. 方法定义

下拉刷新：

function pulldownRefresh(){
    //业务逻辑代码，比如通过ajax从服务器获取新数据；
    //注意，加载完新数据后，必须执行如下代码，注意：若为ajax请求，则需将如下代码放置在处理完ajax