以乐淘的商品搜索（结果）页面为例。
【待补充：效果图】
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
