mui PHP实现下拉刷新,移动端页面实现下拉刷新、上拉加载 – 基于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可选参数

下拉刷新

style:'circle',必选，下拉刷新样式，目前支持原生5+ ‘circle’样式

color:'#2BD009', 可选，默认“#2BD009” 下拉刷新控件颜色

height:'50px', 可选,默认50px.下拉刷新控件的高度,

range:'100px', 可选 默认100px,控件可下拉拖拽的范围

offset:'0px', 可选 默认0px,下拉刷新控件的起始位置

auto: true, 可选,默认false.首次加载自动上拉刷新一次

contentdown : "下拉可以刷新", 可选，在下拉可刷新状态时，下拉刷新控件上显示的标题内容

contentover : "释放立即刷新", 可选，在释放可刷新状态时，下拉刷新控件上显示的标题内容

contentrefresh : "正在刷新...", 可选，正在刷新状态时，下拉刷新控件上显示的标题内容

上拉加载更多

contentrefresh: '正在下拉加载的时候的提示文字',

contentnomore: '所有数据数据加载完毕后的提示文字'

但是要显示所有数据加载完毕必须结束【上拉加载更多】。

要调用结束方法：

mui('.mui-scroll-wrapper').pullRefresh().endPullupToRefresh(true);

结束下拉刷新的方法

mui('.mui-scroll-wrapper').pullRefresh().endPulldownToRefresh();

结束上拉加载更多方法

mui('.mui-scroll-wrapper').pullRefresh().endPullupToRefresh();

结束上拉加载更多方法 并且提示没有更多数据了

mui('.mui-scroll-wrapper').pullRefresh().endPullupToRefresh(true);

重置上拉加载更多方法

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