MUI的webview模式-缩放式侧滑(类手机QQ)

MUI提供了非常多的控件,我想其中的侧滑导航大多数MUI使用者都在使用,并且遇到不少难题。MUI模板里面有一个非常亮眼的侧滑导航当属缩放式导航(类手机QQ),这是一个DIV模式的缩放式侧滑,它的优点是可以跟着手势滑动,缺点是不可以复用,其实它还有其它缺点,比如在主页面拥有子webview的情况下,这种缩放式侧滑就无法使用了,由于是div模式的,子webview并不会跟着一起缩放。这就不得不让人舍弃主页面的子webview了,但是一般主页面都有下拉刷新控件的,而下拉刷新最佳的拖动性能是必须使用一个单独的webview去装载下拉刷新(使用原生body滚动,并且下拉拖动的是webview不是div),如下图,中间下拉刷新是一个webview,导航和底部菜单是一个webview,因此遇到这种情况我们就需要采用webview模式的缩放式侧滑。



这里我使用webview模式开发的缩放式侧滑,做的不好的地方请指教。主要思路是让一个左滑webview被挡在主webview之下;首先有一个侧滑页面的webview和主页面的webview,主页面下有一个子webview。我们先预加载左边的侧滑页面member/left.html,代码图片如下(未登录情况下的左边滑动webview,注意布局右边留一部分空白提供遮挡):

// 预加载侧滑页面,先让页面藏在显示区域之外-100%
		  	var memberLeftView = mui.preload({
			    url:'views/member/left.html',
			    id:'views/member/left.html',
			    styles: {
					left: "-100%",
					zindex: -9997,
					render:'always'
				}
			});

左边图片如下:


然后在触发侧滑的时候设置页面webview的移动位置,侧滑页面首先右移到显示区域,主页面的webview移动到left: '70%',top: '10%',bottom: '10%',的位置,同时打开遮罩(webview的遮罩会同时把子页面也一起遮罩),动画300毫秒的移动时间,注意:切勿使用mui.createMash(callback);去创建遮罩,因为主页面是有子webview,会造成不同步且会出现闪动情况,另外render:'always'可以避免每次去渲染dom,增强webview的缩放体验。接着在关闭遮罩的时候,再移回原来的位置,这样就实现了简单的webview模式的缩放式侧滑。注意:恢复正常界面的时候隐藏侧滑页面,避免资源消耗。代码如下:

                        // 我的头像的点击事件
			document.getElementById('reho-left-me').addEventListener('tap', function() {
				// 侧滑页面出现右移到显示区域
				GO_Index.memberLeftView.show('none', 0, function() {
					GO_Index.memberLeftView.setStyle({
						left: '0',
					});
				});
				// 主界面右移
				GO_Index.indexView.show('none', 0, function() {
					GO_Index.indexView.setStyle({
						left: '70%',
						top: '10%',
						bottom: '10%',
						mask: 'rgba(0,0,0,0.5)',
						transition: {
							duration: 300
						}
					});
				});
				
				// 每次移除遮罩点击事件,避免重复添加监听
				GO_Index.indexView.removeEventListener('maskClick');
				// 点击关闭遮罩时
				GO_Index.indexView.addEventListener('maskClick', function(){
					// 主界面移动到最大显示区域
					GO_Index.indexView.setStyle({
						left: '0',
						top: '0',
						bottom: '0',
						mask: 'none',
						transition: {
							duration: 300
						}
					});
					// 侧滑界面移出显示区域之外
					GO_Index.memberLeftView.setStyle({
						left: "-100%",
						transition: {
							duration: 300
						}
					});
					// 隐藏侧滑页面,setTimeout避免竞争资源
					setTimeout(function() {
						GO_Index.memberLeftView.hide();
					}, 300);
					
				},false);
				
			});

实现效果如下图:


感谢你的阅读,webview模式的缩放是为了弥补存在子webview的情况下实现缩放式侧滑的难题。存在不足的地方请指教,谢谢!更多精彩内容请访问DCloud官网(http://www.dcloud.io/)


阅读更多
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页