新项目需要使用mui实现，考虑到之前mui项目代码不忍直视，急需充电，故抽空重学习了一遍mui，总结了些之前忽略的知识点。
1.mui.alert()
- mui.alert()可接收四个参数
- 提醒内容
- 提醒标题
- 提醒按钮
- 确认后执行的回调函数
- mui.toast() 自动消失的提示弹框
- 参数同上
- mui.confirm()
- 第三个参数为一个数组，可设置两个按钮的文案信息
- 第四个参数的index属性可用来判断用户点击了取消还是确认(e.index === 1 ‘确认’)
- mui.prompt() 带确认取消功能的输入框
- placeholder
- 提醒内容
- 提醒标题
- 提醒按钮数组
- 回调函数（e.index，e.value）
2.单选多选获取值的思路
- 设置相同的class，通过class获取标签元素
- 函数封装，传入class值即可判断当前单选多选框的选择状态
// get radio value by class name
// TODO handle empty case
const getRadioRes = cn => {
let val = ''
(document.getElementsByClassName('cn') || []).map(v => {
v.checked && (val = v.value)
})
return val
}
3.初始化
mui在mui.init()中会自动初始化控件，但动态添加的元素需要重新初始化。
mui('.mui-input-row input').input()
(1).插件初始化
mui.init()
(2).页面初始化
mui.plusReady(function () {
})
4.ajax拦截器
// ajax发送前钩子函数
mui.ajaxSettings.beforeSend = function (xhr, setting) {
xhr.setRequestHeader("Authorization", token);
}
// ajax请求结果返回后处理函数
$.ajaxSettings.complete = function(xhr, status) {
console.log('complete:::' + status);
}
5.获取mui开关组件的状态
let obj = document.getElementById('mySwitch')
if (obj.classList.contains('mui-active')) {
// 开关打开
} else {
// 开关关闭
}
// 开关切换状态监听
obj.addEventListener('toggle', e => {
if (e.detail.isActive) {
// 开关打开
} else {
// 开关关闭
}
})
6.调用子页面
父页面中配置init方法
mui.init({
subpages: [{
url: 'sub.html',
id: 'sub.html',
style: {
top: '45px', // 从顶部45px处开始显示子页面
bottom: '0px' // 子页面显示到父页面底部0px
}
}]
})
7.打开新页面
通过href方式也可打开。
mui.openWindow({
url: '',
id: '',
styles: {
top: '',
bottom: '',
width: '',
height: ''
},
extras: {
// 自定义扩展参数，可用于不同页面传值
}，
createNew: false, //
show: {
// 页面切换展示动画相关配置
},
waiting: {
// 等待框相关配置
}
})
8.页面间传值
注：使用extras传值必须在移动端进行，PC端模拟移动端会报错。因为plus对象只有在移动端环境才有，pc端使用会出现空指针异常。
// 父窗口传递参数
mui.openWindow({
url: '',
id: '',
extras: {
name: 'StevenLee',
age: '22'
}
})
//子页面接收参数
muiplusReady(function() {
var params = plus.Webview.currentWebview;
console.log(params.name) // StevenLee
})
9.页面预加载
概念：在用户尚未触发页面跳转时，提前创建目标页面，当页面跳转可立即进行页面切换，节省页面加载时间。
(1).mui.init方法中的preloadPages
mui.init({
preloadPages: {
url: '',
id: '',
extras: {}
})
10.事件绑定
(1) addEventListener
原声js方式绑定事件。
(2) on
mui('#lists').on('tap', 'li', () => {
})
(3)off 关闭事件
mui('#lists').on('tap', 'li')
(4)事件触发
mui.trigger('btn', 'tap')
mui.trigger(<dom节点>, <触发事件>, <传输的数据>)
(5)自定义事件
可用于页面间传值
- 添加监听
window.addEventListener('newsInfo', data => {
// ...
console.log(data.detail.id) // nice
})
- 触发事件 mui.fire()
- 参数一 一个预加载对象
- 参数二 自定义事件名称
- 参数三 页面要传的对象值
mui.plusReady(function() {
var detailPage = mui.preload({ // 预加载元素
url: 'sub.html',
id: 'sub.html'
})
mui('#lists').on('tap', 'li', () => {
mui.fire(detailPage, 'newsInfo', {id: 'nice'})
mui.openWindow({id: 'sub.html'}) //打开页面
})
})
END
