mui开发文档Word格式文档下载.docx
- 文档编号:19786355
- 上传时间:2023-01-10
- 格式:DOCX
- 页数:22
- 大小:23.75KB
mui开发文档Word格式文档下载.docx
《mui开发文档Word格式文档下载.docx》由会员分享,可在线阅读,更多相关《mui开发文档Word格式文档下载.docx(22页珍藏版)》请在冰豆网上搜索。
新窗口的额外扩展参数,可用来处理页面间传值;
例如:
varwebview=({
'
name:
mui'
ddEventListener('
tap'
function(){
..
ui-action-back类的控件
在屏幕内,向右快速滑动
Android手机按下back按键
iOS平台原生支持从屏幕边缘右滑关闭
iOS平台可通过popGesture参数实现从屏幕边缘右滑关闭webview,参考,若想禁用该功能,可通过setStyle方法设置popGesture为none。
hbuilder中敲mheader生成的代码块,会自动生成带有返回导航箭头的标题栏,点击返回箭头可关闭当前页面,原因就是因为该返回箭头包含.mui-action-back类,代码如下:
<
headerclass="
mui-barmui-bar-nav"
>
<
aclass="
mui-action-backmui-iconmui-icon-left-navmui-pull-left"
/a>
h1class="
mui-title"
标题<
/h1>
/header>
若希望在顶部导航栏之外的其它区域添加关闭页面的控件,只需要在对应控件上添加.mui-action-back类即可,如下为一个关闭按钮示例:
buttontype="
button"
class='
mui-btnmui-btn-dangermui-action-back'
关闭<
/button>
mui框架封装的页面右滑关闭功能,默认未启用,若要使用右滑关闭功能,需要在();
方法中设置swipeBack参数,如下:
swipeBack:
true({
preloadPages:
[
{
prelaod-page-url,
preload-page-id,
{},varpage=({
new-page-id,etURL());
}
},5000)
minitpreload
mpreload(单个webview)
二、事件管理
除了可以使用addEventListener()方法监听某个特定元素上的事件外,也可以使用.on()方法实现批量元素的事件绑定。
event
Type:
需监听的事件名称,例如:
selector
选择器
handler
(event)
事件触发时的回调函数,通过回调中的event参数可以获得事件详情
示例
点击新闻列表,获取当前列表项的id,并将该id传给新闻详情页面,然后打开新闻详情页面
mui("
.mui-table-view"
).on('
'
.mui-table-view-cell'
function(){
n("
tap"
"
li"
foo_1);
n("
foo_2);
functionfoo_1(){
foo_1execute"
);
}
functionfoo_2(){
foo_2execute"
ff("
off(event,selector)适用于取消对应选择器上特定事件的所有回调,例如:
off(event)适用于取消当前元素上绑定的特定事件的所有回调,例如:
p"
foo_3);
functionfoo_3(){
foo_3execute"
off()适用于取消当前元素上绑定的所有事件回调,例如:
doubletap"
foo_4);
functionfoo_4(){
foo_4execute"
ff();
mmoff
使用()方法可以动态触发特定DOM元素上的事件。
element
触发事件的DOM元素
事件名字,例如:
、'
swipeleft'
data
需要传递给事件的业务参数
自动触发按钮的点击事件:
varbtn=("
submit"
..
触发自定义事件
通过()方法可触发目标窗口的自定义事件:
target
需传值的目标webview
自定义事件名称
json格式的数据
目标webview必须触发loaded事件后才能使用自定义事件
若新创建一个webview,不等该webview的loaded事件发生,就立即使用()或(webview,'
eventName'
{}),则可能无效;
案例参考:
假设如下场景:
从新闻列表页面进入新闻详情页面,新闻详情页面为共用页面,通过传递新闻ID通知详情页面需要显示具体哪个新闻,详情页面再动态向服务器请求数据,mui要实现类似需求可通过如下步骤实现:
在列表页面中预加载详情页面(假设为)
列表页面在点击新闻标题时,首先,获得该新闻id,触发详情页面的newsId事件,并将新闻id作为事件参数传递过去;
然后再打开详情页面;
详情页面监听newsId自定义事件
列表页面代码如下:
ui-content'
'
a'
function(e){
varid=('
id'
...
mfire
三、mui工具类
mui框架将很多功能配置都集中在方法中,要使用某项功能,只需要在方法中完成对应参数配置即可,目前支持在方法中配置的功能包括:
、、、、、、。
mui需要在页面加载时初始化很多基础控件,如监听返回键,因此务必在每个页面中调用
以下各配置模块在其对应文档中有详细阐述,请点击链接查看,这里只列出所有可配置项
.
}],
],
},
.itle类的<
p>
元素
若要将mui对象转化成dom对象,可使用如下方法(类似jquery对象转成dom对象):
ui-slider'
).slider().gotoItem
(1);
示例2:
重新开启上拉加载
mui('
#pullup-container'
).pullRefresh().refresh(true);
mmui
each既是一个类方法,同时也是一个对象方法,两个方法适用场景不同;
换言之,你可以使用()去遍历数组或json对象,也可以使用mui(selector).each()去遍历DOM结构。
obj
||
需遍历的对象或数组;
若为对象,仅遍历对象根节点下的key
(||index,element)
为每个元素执行的回调函数;
其中,index表示当前元素的下标或key,element表示当前匹配元素
(index,element)
为每个匹配元素执行的回调函数;
其中,index表示当前元素在匹配元素中的位置(下标,从0开始),element表示当前匹配元素,可用this关键字代替
示例1
输出当前数组中每个元素的平方
vararray=[1,2,3]
(array,function(index,item){
(item*item);
})
示例2
当前页面中有三个字段,如下:
divclass="
mui-input-group"
mui-input-row"
label>
字段1:
/label>
inputtype="
text"
class="
mui-input-clear"
id="
col1"
placeholder="
请输入"
/div>
字段2:
col2"
字段3:
col3"
提交时校验三个字段均不能为空,若为空则提醒并终止业务逻辑运行,使用each()方法循环校验,如下:
varcheck=true;
.mui-input-groupinput"
).each(function(){
meach
mmeach(遍历DOM)
将两个对象合并成一个对象。
需合并的目标对象
object1
需合并的对象
objectN
deep
若为true,则递归合并
vartarget={
company:
dcloud"
product:
mui:
小巧、高效"
}
varobj1={
city:
beijing"
HBuilder:
飞一样的编码"
(target,obj1);
lus
返回是否在基座中运行
.stream
返回是否为流应用
.android
返回是否为安卓手机
.version
安卓版本号
.isBadAndroid
android非Chrome环境
.iOS
返回是否为苹果设备
返回手机版本号
.iphone
返回是否为苹果手机
.ipad
返回是否为ipad
返回是否在微信中运行
检测是否为iOS或安卓系统版本是否小于
if||&
&
parseFloat<
){
}
mos
一、ajax请求
mui框架基于htm5plus的,封装了常用的Ajax函数,支持GET、POST请求方式,支持返回json、xml、html、text、script数据类型;
本着极简的设计原则,mui提供了方法,并在方法基础上,进一步简化出最常用的()、()、()三个方法。
url
请求发送的目标地址
settings
key/value格式的json对象,用来配置ajax请求参数,支持的完整参数参考如下([settings])方法
key/value格式的json对象,用来配置ajax请求参数,支持的详细参数如下:
async
发送同步请求
crossDomain5+only
强制使用5+跨域
发送到服务器的业务数据
dataType
预期服务器返回的数据类型;
如果不指定,mui将自动根据HTTP包的MIME头信息自动判断;
支持设置的dataType可选值:
"
xml"
:
返回XML文档
html"
返回纯文本HTML信息;
script"
返回纯文本JavaScript代码
json"
返回JSON数据
返回纯文本字符串
error
(XMLHttpRequestxhr,Stringtype,StringerrorThrown)
请求失败时触发的回调函数,该函数接收三个参数:
xhr:
xhr实例对象
type:
错误描述,可取值:
timeout"
"
error"
abort"
parsererror"
、"
null"
errorThrown:
可捕获的异常对象
success
(Anythingdata,StringtextStatus,XMLHttpRequestxhr)
请求成功时触发的回调函数,该函数接收三个参数:
data:
服务器返回的响应数据,类型可以是json对象、xml对象、字符串等;
textStatus:
状态描述,默认值为'
success'
timeout
请求超时时间(毫秒),默认值为0,表示永不超时;
若超过设置的超时时间(非0的情况),依然未收到服务器响应,则触发error回调
type
请求方式,目前仅支持'
GET'
和'
POST'
,默认为'
方式
headers
指定HTTP请求的Header
headers:
{'
Content-Type'
application/json'
processData
为了匹配默认的content-type("
application/x-www-form-urlencoded"
),
mui默认会将data参数中传入的非字符串类型的数据转变为key1=value&
key2=value2格式的查询串;
如果业务需要,希望发送其它格式的数据(比如Document对象),可以设置processData为false
代码示例:
如下为通过post方式向某服务器发送鉴权登录的代码片段
(,{
data:
username:
username'
password:
password'
dataType:
json'
.
error:
function(xhr,type,errorThrown){
.
},'
()方法和()方法类似,只不过是直接使用GET请求方式向服务器发送数据、且不处理timeout和异常(若需处理异常及超时,请使用()方法),使用方法:
(url[,data][,success][,dataType]),如下为获得某服务器新闻列表的代码片段,服务器以json格式返回数据列表
(,{category:
news'
},function(data){
如上()方法和如下()方法效果是一致的:
category:
()方法是在()方法基础上的更进一步简化,限定返回json格式的数据,其它参数和()方法一致,使用方法:
(url[,data][,success]),如上获得新闻列表的代码换成()方法后,更为简洁,如下:
问答社区话题讨论:
majax
mget
mjson
三、下拉刷新
为实现下拉刷新功能,大多H5框架都是通过DIV模拟下拉回弹动画,在低端android手机上,DIV动画经常出现卡顿现象(特别是图文列表的情况);
mui通过双webview解决这个DIV的拖动流畅度问题;
拖动时,拖动的不是div,而是一个完整的webview(子webview),回弹动画使用原生动画;
在iOS平台,H5的动画已经比较流畅,故依然使用H5方案。
两个平台实现虽有差异,但mui经过封装,可使用一套代码实现下拉刷新。
主页面内容比较简单,只需要创建子页面即可:
pullrefresh-subpage-url,...lass等
down:
height:
50,发下拉刷新拖动距离,
auto:
true,动下拉刷新一次
contentdown:
"
下拉可以刷新"
."
ullRefresh().endPulldownToRefresh();
下拉刷新组件滚动到特定位置的方法类似区域滚动组件
xpos
要在窗口文档显示区左上角显示的文档的x坐标
ypos
要在窗口文档显示区左上角显示的文档的y坐标
duration
滚动时间周期,单位是毫秒
示例:
在hellomui下拉刷新示例中,实现了双击标题栏,让列表快速回滚到顶部的功能;
代码如下:
varcontentWebview=null;
ddEventListener('
doubletap'
function(){
if(contentWebview==null){
contentWebview=0];
ullRefresh().scrollTo(0,0,100)"
可以解决修改下拉刷新子页面默认top值后,下拉刷新提示框位置异常问题
根据实际需求在父页面给mui-content设置top属性
.mui-bar-nav~.mui-content.mui-pull-top-pocket{
180px!
important;
mpull(DOM结构)
minitpull(初始化组件)
mmpull(组件方法)
四、上拉加载
概述
mui的上拉加载和下拉刷新类似,都属于pullRefresh插件,使用过程如下:
1、页面滚动到底,显示“正在加载...”提示(mui框架提供)
2、执行加载业务数据逻辑(开发者提供)
3、加载完毕,隐藏"
正在加载"
提示(mui框架提供)
开发者只需关心业务逻辑,实现加载更多数据即可。
初始化方法类似下拉刷新,通过方法中pullRefresh参数配置上拉加载各项参数,如下:
pullRefresh:
container:
refreshContainer,lass等
up:
50,认50.触发上拉加载拖动距离
true,动上拉加载一次
contentrefresh:
正在加载..."
.”过程
nomore
是否还有更多数据;
若还有更多数据,则传入false;
否则传入true,之后滚动条滚动到底时,将不再显示“上拉显示更多”的提示语,而显示“没有更多数据了”的提示语;
functionpullfresh-function(){
....
efresh(true)方法,可重置上拉加载控件,如下代码:
ullRefresh().refresh(true);
在部分场景下希望禁用上拉加载,比如在列表数据过少时,不想显示“上拉显示更多”、“没有更多数据”的提示语,开发者可以通过调用disablePullupToRefresh()方法实现类似需求,代码如下:
ullRefresh().disablePullupToRefresh();
使用disablePullupToRefresh()方法禁用上拉加载后,可通过enablePullupToRefresh()方法再次启用上拉加载,代码如下:
ullRefresh().enablePullupToRefresh();
1、
2、问答社区话题讨论:
五、js代码块
js组件
组件
触发字符
()
mpl
usready
mre
ady
event
mmon
mtrigger
dg
ds
().addEventListener()
dsa
dga
wad
dad
dialog
mda
lert
mdc
onfirm
mdp
rompt
mdt
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- mui 开发 文档