phpstudy怎么创建网站/进行优化
以乐淘的商品搜索(结果)页面为例。
【待补充：效果图】
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