MUI-页面初始化

向右看齐 2022-08-06 18:00 224阅读 0赞

mui框架将很多功能配置都集中在mui.init方法中，要使用某项功能，只需要在mui.init方法中完成对应参数配置即可，目前支持在mui.init方法中配置的功能包括：[创建子页面][Link 1]、[关闭页面][Link 2]、[手势事件配置][Link 3]、[预加载][Link 4]、[下拉刷新][Link 5]、[上拉加载][Link 6]。

这里说明一下。在没有webview的情况下，有些事情是无法处理的，比如手势事件、预加载、创建子页面等。

这里我们以手势事件为例：

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    		<title>页面初始化</title>
    		<script src="../DKSHDemo/Resource/js/mui.min.js"></script>
    		<link href="../DKSHDemo/Resource/css/mui.min.css" rel="stylesheet" />
    		<script type="text/javascript" charset="utf-8">
    			mui.init({
    		      		 gestureConfig:{
    		             tap: true,        //默认为true
    		             doubletap: true,  //默认为false
    		             longtap: false,    //默认为false
    		             swipe: true,      //默认为true
    		             drag: true,       //默认为true
    		             hold:false,       //默认为false，不监听
    		            release:false      //默认为false，不监听
    		  }
    		         });
    		</script> 
    		<style>
    		    body{position: relative;}
    			.mui-btn{width:80%; margin: 0 auto; margin-top: 10px; margin-left: 10%;}
    		</style>
    	</head>
    	<body>
    		<button type="button" id="tap" class='mui-btn mui-btn-positive '>tap事件</button>
    		<button type="button" id="doubletap" class='mui-btn mui-btn-positive '>doubletap事件</button>
    		<button type="button" id="longtap" class='mui-btn mui-btn-positive '>longtap事件</button>
    	    <button type="button" id="swipe" class='mui-btn mui-btn-positive '>swipe事件</button>
    	</body>
    
    </html>
    <script>
    	document.getElementById("tap").addEventListener("tap",function(){
    		alert("tap事件支持");
    	})
    	document.getElementById("doubletap").addEventListener("doubletap",function(){
    		alert("doubletap事件支持");
    	})
    	document.getElementById("longtap").addEventListener("longtap",function(){
    		alert("longtap事件支持");
    	})
    	document.getElementById("swipe").addEventListener("swiperight",function(){
    		alert("swipe事件支持");
    	})
    </script>

我们来看看效果如何：

![Image 1][]![Image 1][]

![Image 1][]

从上面的运行结果我们可以看到，在init中注册的手势有的支持有的则不支持。这是

有我们在init设置的。

![Center][]![Center 1][]![Center 2][]

好了。怎么样？第一天入门还不错吧。后面还有更多课程哦！

下载地址：[http://download.csdn.net/detail/u013059555/8435811][http_download.csdn.net_detail_u013059555_8435811]

[Link 1]: http://dcloudio.github.io/mui/javascript/#subpage
[Link 2]: http://dcloudio.github.io/mui/javascript/#closewindow
[Link 3]: http://dcloudio.github.io/mui/javascript/#gesture
[Link 4]: http://dcloudio.github.io/mui/javascript/#preload
[Link 5]: http://dcloudio.github.io/mui/javascript/#pullrefresh-down
[Link 6]: http://dcloudio.github.io/mui/javascript/#pullrefresh-up
[Image 1]: 
[Center]: https://img-blog.csdn.net/20150209180642468?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvYnJ1Y2VjaGVuZzIy/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center
[Center 1]: https://img-blog.csdn.net/20150209180657569?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvYnJ1Y2VjaGVuZzIy/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center
[Center 2]: /images/20220805/629c979f42294ee9b3991e191c568725.png
[http_download.csdn.net_detail_u013059555_8435811]: http://download.csdn.net/detail/u013059555/8435811