对于 Ajax 在 MUI 框架中的用运以及单 webview 模式中的下拉刷新功能探究

作者：黎燃

2022-11-17
内蒙古
本文字数：2289 字
阅读完需：约 8 分钟

MUI 之 Ajax

mui 框架基于 htm5plus 的 XMLHttpRequest，封装了常见的 Ajax 函数，支持 GET 和 POST 请求，并返回 json、xml、html、text 和 script 数据类型；基于极简主义设计原则，mui 提供了 mui。ajax 方法，进一步简化了三种最常用的 mui。得到（），梅。getJSON（）和 mui。post（）基于 mui。ajax 方法。

urlType: String 请求发送的目标地址 settingsType: PlainObjectkey/value 格式的 json 对象，用来配置 ajax 请求参数，支持的完整参数参考如下 mui.ajax([settings])方法

mui.ajax('http://server-name/login.php',{  data:{    username:'username',    password:'password'  },  dataType:'json',//服务器返回json格式数据  type:'post',//HTTP请求类型  timeout:10000,//超时时间设置为10秒；  headers:{'Content-Type':'application/json'},                  success:function(data){    //服务器返回响应，根据响应结果，分析是否登录成功；    ...  },  error:function(xhr,type,errorThrown){    //异常处理；    console.log(type);  }});

复制代码

post（）方法用于 ajax（）的简化方法，它直接使用 post 请求向服务器发送数据，而不处理超时和异常（如果需要处理异常和超时，请使用 mui.ajax）方法）。方法是 mui。post（url[，data][，success][，dataType]）。上述登录验证码被 mui 替换后。post（），代码更简洁，如下所示：

mui.post('http://server-name/login.php',{    username:'username',    password:'password'  },function(data){    //服务器返回响应，根据响应结果，分析是否登录成功；    ...  },'json');

复制代码

get（）方法和 mui post（）方法类似，只是 get 请求方法直接用于向服务器发送数据，而不处理超时和异常（如果需要处理异常和超时，请使用 mui.ajax（）方法）。方法是：mui-Get（url[，data][，success][，dataType]）。以下是获取服务器新闻列表的代码段。服务器以 json 格式返回数据列表

mui.get('http://server-name/list.php',{category:'news'},function(data){    //获得服务器响应    ...  },'json');

复制代码

mui.getJSON()方法是在 mui.get()方法基础上的更进一步简化，限定返回 json 格式的数据，其它参数和 mui.get()方法一致，使用方法： mui.get(url[,data][,success])，如上获得新闻列表的代码换成 mui.getJSON()方法后，更为简洁

mui.getJSON('http://server-name/list.php',{category:'news'},function(data){    //获得服务器响应    ...  });

复制代码

单 webview 模式

为了实现下拉刷新功能，大多数 H5 框架通过 DIV 模拟下拉反弹动画。在低端 Android 手机上，DIV 动画经常出现卡住（尤其是在图像文本列表的情况下）；通过使用原生 webview 下拉刷新，mui 解决了 DIV 动画卡住的问题，拖动效果更加流畅；这里提供了两种下拉刷新模式，以应用于不同的场景：

动画原理：

在下拉刷新期间，会触发本机下拉刷新控件，并且整个 webview 位置不会更改，因此在拖动过程中不会发生 DOM 重绘。当控件被拖动到某个位置时，将触发动态数据加载和刷新操作。此模式是下拉刷新模式。与双网络视图模式相比，它不创建额外的网络视图，并且具有更好的性能。

使用方法：

在 mui 初始化时设置 pullRefresh 参数，与双 webview 模式下的子页面设置相同。解释：DOM 结构没有特殊要求。您只需要指定下拉刷新容器 ID

mui.init({  pullRefresh : {    container:"#refreshContainer",//下拉刷新容器标识，querySelector能定位的css选择器均可，比如：id、.class等    down : {      style:'circle',//必选，下拉刷新样式，目前支持原生5+ ‘circle’ 样式      color:'#2BD009', //可选，默认“#2BD009” 下拉刷新控件颜色      height:'50px',//可选,默认50px.下拉刷新控件的高度,      range:'100px', //可选 默认100px,控件可下拉拖拽的范围      offset:'0px', //可选 默认0px,下拉刷新控件的起始位置      auto: true,//可选,默认false.首次加载自动上拉刷新一次      callback :pullfresh-function //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；    }  }});

复制代码

模式描述：

优势：更好的性能体现在两个方面：与双 Web 视图相比，不创建额外的子 Web 视图会消耗更少的性能在下拉式拖动期间不进行重绘，这也降低了性能消耗缺点：目前，仅支持“规则”样式及其颜色自定义

动画原理：使用双视图模式下拉刷新创建子视图添加列表；拖动时，会拖动一个完整的 Web 视图，这可以避免 DIV 拖动平滑度差的问题。回弹动画使用本地动画；在 iOS 平台上，H5 动画相对流畅，因此仍在使用 H5 方案。虽然这两个平台的实现不同，但可以使用一组代码在封装后实现 mui 的下拉刷新。

mui.init({    subpages:[{      url:pullrefresh-subpage-url,//下拉刷新内容页面地址      id:pullrefresh-subpage-id,//内容页面标志      styles:{        top:subpage-top-position,//内容页面顶部位置,需根据实际页面布局计算，若使用标准mui导航，顶部默认为48px；        .....//其它参数定义      }    }]});

复制代码

iOS 平台的下拉刷新使用由 mui 封装的区域滚动组件。为了保证两个平台 DOM 结构的一致性，内容页面应该按照以下 DOM 结构统一构造：

<!--下拉刷新容器--><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>

复制代码

模式描述：优势：您可以自定义下拉刷新样式、更改文本等。请参阅有关自定义下拉刷新风格的问题和答案缺点：与单个 webview 相比，它消耗了更多的性能，但比 div 模式要好 DOM 结构需要统一配置

发布于: 刚刚阅读数: 3

原文链接:【http://xie.infoq.cn/article/9effffed37b66bcd85fc1793c】。文章转载请联系作者。

黎燃

关注

前端工程师 2022-05-06 加入

专注学习分享前端知识。

发布

暂无评论

创作场景

对于 Ajax 在 MUI 框架中的用运以及单 webview 模式中的下拉刷新功能探究

MUI 之 Ajax

单 webview 模式

动画原理：

使用方法：

模式描述：

黎燃

评论