mui采坑总结 | 易学教程

mui(‘选择器’).on(‘事件名’, ‘目标选择器(子选择器)’, function(){})事件绑定坑

使用mui获取元素用on绑定事件的时候，如果目标选择器和mui选择器，即是两者都是当前元素，绑定失败。

mui的绑定仅支持事件委托，不支持当前元素绑定，当前元素绑定请直接使用addEventListener,removeEventListener

案例

<li id="areaArrowDwon">
	<span class="location">地点</span>
	<span class="mui-icon mui-icon-arrowdown"></span>
</li>
//此处使用事件委托，才能生效
mui('#areaArrowDwon').on('tap', 'span', function() {
	console.log('被点击了');
});

mui(‘选择器’)获取dom

如果直接使用mui(‘选择器’)获取dom需要转换。
mui('#areaArrowDwon')[0].innerHTML

mui(‘选择器’)获取dom必须先使用mui(‘选择器’)[0]转换为dom

mui本地存储


设置本地存储命令：plus.storage.setItem(存储名,存储参数);

读取本地存储命令：plus.storage.getltem(存储名);

删除本地存储命令：plus.storage.removeItem(存储名)；

循环遍历列表数据

// 渲染知识库列表
function renderKnowledgeBase(knowledgeBaseList) {
	var knowledgeBaseListWrapperDom = document.querySelector('.mui-table-view');
	var knowledgeBaseListDom = '';
	// 遍历列表数据
	for (var i = 0 ; i < knowledgeBaseList.length; i++) {
		knowledgeBaseListDom += '<li class="mui-table-view-cell mui-media" data-myID="' + knowledgeBaseList[i].ID + '"><a href="javascript:;">';
		knowledgeBaseListDom += '<img class="mui-media-object mui-pull-left" src="' + knowledgeBaseList[i].TitlePicUrl + '">'
		knowledgeBaseListDom += '<div class="mui-media-body"><p class="mui-ellipsis ul-a-div-p-knowList">' + knowledgeBaseList[i].KnowTitle + '</p>'
		knowledgeBaseListDom += '<span class="ul-a-div-span-knowList">' + knowledgeBaseList[i].KnowAddTimeDisplay +' </span></div></a></li>'
	}
	// 将列表数据添加到容器
	knowledgeBaseListWrapperDom.innerHTML = knowledgeBaseListDom;
	
	var childNodeList = knowledgeBaseListWrapperDom.childNodes;
	// 给每一个列表子项添加点击事件
	for (var i = 0 ; i < childNodeList.length; i++) {
		(function(i) {
			console.log(childNodeList[i])
			childNodeList[i].addEventListener('tap', function(e) {
				// 获取自定义属性的值
				console.log(e.currentTarget.dataset.myid)
			})
		}) (i)
	}
	
}

js高效修改对象数组里的对象属性名

JSON.parse(JSON.stringify(data).replace(/title/g, 'name'))    //data为数组，title为修改前，name为修改后

解释：

JSON.stringify()把json对象转成json字符串；
使用正则的replace()方法替换属性名；
JSON.parse()把json字符串又转成json对象。

data.map(v=>{return {name: v.title}})

mui防止软键盘弹起，导致页面变形

<!--防止软键盘调起时，底部内容随之挤上来-->
<script type="text/javascript">
	//获取原始窗口的高度
	var originalHeight = document.documentElement.clientHeight || document.body.clientHeight;
	window.onresize = function() {
		//软键盘弹起与隐藏  都会引起窗口的高度发生变化
		var resizeHeight = document.documentElement.clientHeight || document.body.clientHeight;
		if(resizeHeight * 1 < originalHeight * 1) { //resizeHeight<originalHeight证明窗口被挤压了
			plus.webview.currentWebview().setStyle({
				height: originalHeight
			});
		}
	}
</script>

富文本编辑器编辑的内容中的空格不生效问题

.detail_content {
	white-space: pre-wrap;
	word-wrap: break-word;
	tab-size: 4;
}

列表点击事件跳转到详情，多次连续点击失效（+时间戳解决）

// 添加事件跳转详情
mui('.mui-table-view').on('tap', 'li', function(e) {
document.activeElement.blur(); // 点击的时候,收回软键盘
	console.log(this.getAttribute('data-myid'));
	mui.openWindow({
		url: './know-base-details.html?t='+new Date().getTime(),
		extras: {
			myId: this.getAttribute('data-myid'),
			myKnowtype: this.getAttribute('data-myknowtype')
		}
	});
});

mui的picker多级选择器使用setSelectedValue设置默认值无效

setTimeout(function () {
	picker.pickers[0].setSelectedValue(params.selectAreaID[0]);
	setTimeout(function () {
		picker.pickers[1].setSelectedValue(params.selectAreaID[1]);
	});
});

来源：CSDN

作者：yw00yw

链接：https://blog.csdn.net/yw00yw/article/details/102599406

标签

mui