WBUI 说明文档

基于LayerUI Mobile V2改造。

参数

即核心接口:wbui.open(options) 中的options:

type – 设置弹层的类型
类型:Number
默认:0 (0表示信息框(Dialog),1表示消息提示(Toast),2表示加载层(Loading))

content – 设置弹层内容
类型:String
必选参数

title – 设置弹层标题
类型:String或Array
默认:空,值可以为字符串或者数组。,为空则不显示

title: ‘标题’
//或者
title: [‘标题’, ‘class-name’] //第二个参数是自定义标题样式对应的类名

time – 控制自动关闭层所需秒数
类型:Number
默认不开启,支持整数和浮点数,对于Toast初始值设定为2秒

style – 自定义层的样式
类型:String
用法如

wbui.open({
style: 'border:none; background-color:#78BA32; color:#fff;',
content:'内容'
})

运行

skin – 设定弹层显示风格
类型:String
msg(普通提示), 建议用快捷方式wbui.toast()

className – 自定义一个css类
类型:String

用于自定义样式。如
wbui.open({
className: ‘popuo-login’, //这样你就可以在css里面控制该弹层的风格了
content:’内容’
})

btn – 按钮
类型:String/Array
不设置则不显示按钮。如果只需要一个按钮,则btn: ‘按钮’,如果有两个,则:btn: [‘按钮一’, ‘按钮二’]。
点击即关闭弹窗。

anim – 动画类型
类型:String/Boolean
可支持的支持动画配置:scale(默认)、up(从下往上弹出),如果不开启动画,设置false即可

mask – 控制遮罩展现
类型:String/Boolean
默认:true,该参数可允许你是否显示遮罩,并且定义遮罩风格

mask: false //不显示遮罩
或者
mask: ‘background-color: rgba(0,0,0,.3)’ //自定义遮罩的透明度

maskClose
类型:Boolean
默认:true,是否点击遮罩时关闭层

fixed – 是否固定层的位置
类型:Boolean
默认:true

top – 控制层的纵坐标
类型:Number
默认:无,一般情况下不需要设置,因为层会始终垂直水平居中,只有当fixed: false时top才有效。

success – 层成功弹出层的回调
类型:Function
该回调参数返回一个参数为当前层元素对象
success: function(elem){
console.log(elem);
}

yes
类型:Function
点确定按钮触发的回调函数,返回一个参数为当前层的索引

yes: function(index){
alert(‘点击了是’)
}

no
类型:Function
点取消按钮触发的回调函数

end
类型:Function
层彻底销毁后的回调函数

其它内置方法/属性

wbui.v
返回当前使用的wbui mobile版本号

wbui.close(index)
用于关闭特定层,index为该特定层的索引

wbui.closeAll()
关闭页面所有wbui的层

常用快捷调用

wbui.alert() 快捷弹窗提示

wbui.alert('弹窗内容');

//加关闭时回调
wbui.alert(‘弹窗内容’,function(index){
//回调输出
});

//其他特别配置方式
wbui.alert(‘弹窗内容’,{
btn:’ok‘,
mask:0,

});

wbui.confirm() 对话框

//确认时回调
wbui.confirm(‘弹窗内容’,function(index){
//确认回调
},function(index){
//取消回调
});

//其他特别配置方式
wbui.confirm(‘弹窗内容’,{
btn:[‘确认‘,’取消’],
yes:function(index){ //确认回调 }
no:function(index){ //取消回调 }

});

wbui.toast()消息弹窗

wbui.toast('弹出消息内容');

//设定其他参数,例如关闭时间
wbui.toast(‘弹出消息内容’,{
time:5
});

wbui.loading()调用方式

var wbloading = wbui.loading();
wbui.close(wbloading); //注销

我们将24小时内回复。
2023-12-01 22:38:38
您好,有任何疑问请与我们联系!
您的工单我们已经收到,我们将会尽快跟您联系!
取消

选择聊天工具: