移动端页面实现下拉刷新、上拉加载 – 基于MUI插件

以乐淘的商品搜索（结果）页面为例。

【待补充：效果图】

HTML的实现

使用MUI的父子盒子嵌套的结构。

• 区域滚动中，上下拉动后出现的提示信息（转菊花、文本等）元素是用绝对定位方式定位到该区域的顶端，且会被页面其他元素（如固定定位的元素）遮住。
• 调整父容器样式：（原默认样式为绝对定位，不符合需求）设置父高100%，设置(子绝)父相。
  
  

MUI插件模板：下拉刷新、上拉加载

产品文档写的比较乱，没有完整模板。
产品文档链接：MUI文档JS组件

代码框架模板

模板经整理如下。
其中，倒计时器是在本地模拟服务器响应时长，实际生产环境中基本不会用倒计时器。

    mui.init({
        pullRefresh: {　　
        container: ".mui-scroll-wrapper", //下拉刷新父容器容器标识
        down: {     //down表示控制下拉刷新
           callback: function() {     //callback表示下拉刷新时的回调函数 可以发生ajax请求来刷新页面
           setTimeout(function() {     //模拟请求时间 延迟1秒结束下拉刷新
           //当数据请求完毕后结束下拉刷新
           mui('.mui-scroll-wrapper').pullRefresh().endPulldownToRefresh();
                    }, 1000)
                }
            },
         up: {     //up表示控制上拉加载更多
           contentrefresh: '正在加载...',
           contentnomore: '没有更多数据了',
           callback: function() {     //上拉加载更多的回调函数 可以发送ajax请求来加载更多数据
                }
            }　　
        }
    });

pullRefresh可选参数

1. 下拉刷新

• style:'circle',必选，下拉刷新样式，目前支持原生5+ ‘circle’样式
• color:'#2BD009', 可选，默认“#2BD009” 下拉刷新控件颜色
• height:'50px', 可选,默认50px.下拉刷新控件的高度,
• range:'100px', 可选 默认100px,控件可下拉拖拽的范围
• offset:'0px', 可选 默认0px,下拉刷新控件的起始位置
• auto: true, 可选,默认false.首次加载自动上拉刷新一次
• contentdown : "下拉可以刷新", 可选，在下拉可刷新状态时，下拉刷新控件上显示的标题内容
• contentover : "释放立即刷新", 可选，在释放可刷新状态时，下拉刷新控件上显示的标题内容
• contentrefresh : "正在刷新...", 可选，正在刷新状态时，下拉刷新控件上显示的标题内容

2. 上拉加载更多

• contentrefresh: '正在下拉加载的时候的提示文字',
• contentnomore: '所有数据数据加载完毕后的提示文字'
  但是要显示所有数据加载完毕必须结束【上拉加载更多】。
  要调用结束方法：
  mui('.mui-scroll-wrapper').pullRefresh().endPullupToRefresh(true);

3. 结束下拉刷新的方法
   mui('.mui-scroll-wrapper').pullRefresh().endPulldownToRefresh();
4. 结束上拉加载更多方法
   mui('.mui-scroll-wrapper').pullRefresh().endPullupToRefresh();
5. 结束上拉加载更多方法 并且提示没有更多数据了
   mui('.mui-scroll-wrapper').pullRefresh().endPullupToRefresh(true);
6. 重置上拉加载更多方法
   mui('.mui-scroll-wrapper').pullRefresh().refresh(true);
   
   

场景与流程分析

用户操作：搜索页输入关键词点击搜索

→ window：跳转到新页面productlist，JS：取到地址中的proNam (search关键词)
→JS：通过aJax调用“搜索产品”接口，向后台传入proNam，拿到后台数据→渲染页面生成初始（新）的商品列表

用户操作：下拉操作

→JS：下拉结束后，down的回调函数通过aJax调用“搜索产品”接口，向后台再请求一次数据→用数据渲染页面生成新的商品列表

用户操作：上拉操作

→JS：下拉结束后，up的回调函数通过aJax调用“搜索产品”接口，向后台请求其他数据→用数据渲染页面生成新的商品列表

用户操作：点击不同排序按钮

→JS：点击事件中，通过aJax调用“搜索产品”接口，向后台请求数据→用数据渲染页面生成新的商品列表

综上所述，商品的查找、筛选及排序都通过同一个后台接口【搜素产品】完成，传入的参数不同返回的结果不同。

搜素产品接口参数：
data: {
proNam：产品名称（非必须）,
brandId：品牌id（非必须）,
price：使用价格排序（非必须）（1升序，2降序）,
num：产品库存排序（非必须）（1升序，2降序）,
pag：第几页（!必须）,
pageSize：每页的条数（!必须）
}

总结：

• 在该页面中，不同的行为都会调用同一个后台接口，向这个后台接口传入同样的对象（对象中的属性不同），对拿到的数据做不同的处理。
• 所以，将aJax请求封装成各行为公共的方法，
  在上拉、下拉、排序等不同行为的函数中，向这个公共方法传入两个参数：ajax传输的data，拿到data后的页面渲染行为（回调函数）。
  
  

JS中如何实现

依赖的框架与库

• 依赖框架：MUI
• 依赖JS库：Zepto
• 页面渲染依赖插件： art-template（非必须，本案例中需要用模板引擎调用生成页面元素）

实现模式：

功能一：模块初始化，调用mui.init方法

在原插件中，下拉和上拉是可以相互独立的两个功能，也可以写到一起。
在初始化模板中设置MUI的pullRefresh各项参数。

功能二（公共方法）：通过aJax向后台接口请求数据，执行传进来的函数

这个功能既会被上拉调用，也会被下拉调用，因此独立封装在初始化模块的外部，与需求二函数同级作用域。

• 必传值的判断赋值：必传项（pag, pageSize）如无传入值则写默认值
  原因：product页面加载时，这个方法即第一次被调用，没有其他函数向它传data值
• aJax请求数据：success回调函数callback需要被传入，使用短路运算符
  
  

功能三：下拉后刷新页面、上拉后加载更多商品，传入mui.init方法作为回调函数调用

其中，下拉down与上拉up的参数中的回调函数用函数名调用，函数声明在初始化模块的外部（同级作用域，而不是内部）。

• 下拉down的回调函数：
  向公共方法传入data；
  向公共方法传入回调函数：
  -调用模板引擎渲染并替换页面内容；
  -结束下拉刷新（调用MUI方法）；
  -重置page，
  -重置上拉加载（调用MUI方法）。
  
  
• 上拉up的回调函数：
  page++，
  向公共方法传入data；
  向公共方法传入回调函数：
  -判断返回数据是否为空（没有更多数据了），如为空则结束上拉加载并提示没有更多数据（调用MUI方法），如数据不为空则渲染内容并向页面append加载；
  -数据刷新完毕后结束上拉加载。
  -重置上拉加载。
  
  

功能四：商品排序

*注册singleTap事件（不能用click）：
MUI提倡在模板中用tap而不是click，MUI的插件源码中会阻止click的默认事件

• 获取data的排序参数（顺/逆序、排序类型等）。
• 向公共方法传入回调函数：渲染并替换页面内容。
• 改变被点击的排序按钮样式。

【待补充：代码实现】

---

2018.1.31