mui采坑总结

左手的ㄟ右手 2023-06-08 06:28 1阅读 0赞

#### 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为修改后

解释：

1.  JSON.stringify()把json对象转成json字符串；
2.  使用正则的replace()方法替换属性名；
3.  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]);
    	});
    });