MUI_使用总结

最新推荐文章于 2020-11-02 11:16:38 发布

卑微猿同学

最新推荐文章于 2020-11-02 11:16:38 发布

阅读量412

点赞数 1

分类专栏： # 前端框架

本文链接：https://blog.csdn.net/weixin_42547014/article/details/106567298

版权

前端框架专栏收录该内容

26 篇文章 0 订阅

订阅专栏

【以下皆为个人理解，欢迎指正错误】

【一】

【1】.查找源码
MUI官方首页，在手机效果展示部分选好想用的样式后，F12打开开发者工具，点击“选取Element”按钮，在Elements中可以看到页面链接，然后在GitHub中“/examples/hello-mui/examples/”下查看源码
在这里插入图片描述
【2】.plus is undefind
浏览器中plus.webview会报错，plus is undefind，同样，mui.plusready中的代码也不会执行。因为plus是HBuilder真机运行或打包时加进去的，属于引擎级的。
如果一次开发并在APP、微信小程序等中都可以正常使用建议抛开webview，像Bootstrap那样只使用样式，把他仅仅作为一个单纯的HTML页面使用。

【3】。。。。。。。

【二】常用操作

添加滚动条

<body>
	<div class="mui-content mui-scroll-wrapper">
		<div class="mui-scroll">
			页面内容
		</div>
	</div>
</body>
.................................................................................
<script>
	mui('.mui-scroll-wrapper').scroll({
		deceleration: 0.0005 //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006
	});
</script>

2.输入框事件

<div class="mui-input-row mui-search">
	<input type="search" class="mui-input-clear" placeholder="" onkeyup="enterSearch(event)" id="searchInput">
</div>
....................................................................
function enterSearch(e) {
	// 键盘抬起事件，13->点击回车
	if (event.keyCode == 13) {
		var keyword = document.getElementById('searchInput').value;
		// console.log(keyword);
	}
}

3.ajax请求

//【post】
 mui.ajax({
 	url: url + 'field/inserttable',
	async: true,
	dataType: 'json',
	// crossDomain: true, //强制使用5+跨域  
	type: 'post',
	timeout: 1000,
	data: {
		fieldobj: JSON.stringify(obj),
	},
	contentType: "application/x-www-form-urlencoded",
	success: function(data) {

	},
	errer:function(xhr, textStatus, errorThrown){
		alert("状态码："+xhr.status);
		alert("状态:"+xhr.readyState)；//当前状态,0-未初始化，1-正在载入，2-已经载入，3-数据进行交互，4-完成。
		alert("错误信息:"+xhr.statusText );
　　	alert("返回响应信息："+xhr.responseText );//这里是详细的信息
　　	alert("请求状态："+textStatus); 　　　　　　　　
　　	alert(errorThrown); 　　　　
	}
 });

//【get】
 mui.ajax({
	url: url ,
	async: true,
	dataType: 'json',
	// crossDomain: true, //强制使用5+跨域  
	type: 'get',
	timeout: 1000,
	success: function(data) {

	},
	error: function(xhr, type, errorThrown) {
		 
	}
});

4.获取扩展图标 mui-icons-extra.ttf

F12 -> NetWork -> All ->找到mui-icons-extra.ttf -> 双击下载

在这里插入图片描述

5.自动消失提示

mui.toast('登录失败，请检查账号或密码', {
	duration: 'long',
	type: 'div'
});

6.获取dom元素

var keyword =  mui('#searchInput')[0].value;

7.添加点击监听事件

var btn = mui('#date_' + btnid)[0];
btn.addEventListener('tap', function() {

});

卑微猿同学

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
MUI_使用总结

【以下皆为个人理解，欢迎指正错误】【1】.查找源码MUI官方首页，在手机效果展示部分选好想用的样式后，F12打开开发者工具，点击“选取Element”按钮，在Elements中可以看到页面链接，然后在GitHub中“/examples/hello-mui/examples/”下查看源码【2】.plus is undefind浏览器中plus.webview会报错，plus is undefind，同样，mui.plusready中的代码也不会执行。因为plus是HBuilder真机运行或打包时加进
复制链接

扫一扫