文档章节

H5移动端开发Webview模式选项卡下实现滑屏切换与点击tap切换

dalsen_c
 dalsen_c
发布于 2017/08/23 11:52
字数 817
阅读 638
收藏 0

一、前言

        最近利用HBuilder结合mui框架以及H5+接口开发一个APP,开发过程中因需求的改变需要做一个多个Webview窗口间滑屏切换的功能。虽然mui框架封装了 swipe手势事件,但实现起来会发现需要解决事件冒泡的问题同时会影响scroll的行为,那么H5+中提供的WebviewObject.drag方法是切换Webview窗口最佳的选择。

二、视图组织

主窗口:Home.html

子窗口:sub_first.html,sub_second.html,sub_third.html,sub_fourth.html

三、实现功能:在主窗口Home.html中实现四个子窗口的滑屏切换以及点击底部webview选项卡切换。

四、代码实现

  1. 主窗口Home.html中创建四个子窗口
    //Home.html
    
       mui.plusReady({
          //窗口名称
          var subpages = ['sub_first.html', 'sub_second.html', 'sub_third.html', 'sub_fourth.html'];
       
          //每个窗口对应的style,top与bottom的值用于为顶部栏及底部栏预留位置
          var subpage_style = [
            {     //第一个窗口默认显示                            
    	      top: '50px',
    	      bottom: '50px'
            },
            {     //第二个窗口设置left为100%,用以将不显示的窗口藏在手机屏幕之外,余下窗口以此类推.
    	      left:'100%',
    	      top: '50px',
    	      bottom: '50px'
            },
            { 
    	      left:'200%',
    	      top: '50px',
    	      bottom: '50px'					
            },   
            {
    	      left:'300%',
    	      top: '50px',
    	      bottom: '50px'					
            }
          ];
    
          /*创建子窗口*/
          var self = plus.webview.currentWebview(); //获取当前webview窗口对象
       
          for(var i=0 ; i<subpages.length ; i++){
             //创建子窗口,参数1为html网页地址,可支持网络地址与本地地址;参数2为窗口的标识;参数3为窗口样式
             var sub_view = plus.webview.create(subpages[i], subpages[i], subpage_style[i]); 
             self.append(sub); //在Webview窗口中添加子窗口
          }
    
       });
  2. 第一个子窗口中实现左右滑屏手势操作(滑至第二个子窗口后可返回第一个子窗口)

    //sub_first.html
    
       mui.plusReady({
    
         var homepage = plus.webview.getTopWebview(); //获取应用显示栈顶的WebviewObject窗口对象,即Home.html
    
         var curr_view = plus.webview.currentWebview(); //获取当前页面的webview对象
        
         var second_view = plus.webview.getWebviewById('sub_second.html'); //获取第二个子窗口对象
    
         // 左滑显示新窗口
         curr_view.drag(
              {
                direction:'left',                   //滑动方向
                moveMode:'followFinger'             //窗口跟随手指滑动
              },
              {
                view:second_view,                   //滑动至第二个子窗口
                moveMode:'follow'
              }, function(e){ 
    	           if(e.result === true){       //判断滑动是否成功滑至第二个子窗口
    
                             //向Home.html触发事件,改变顶部标题以及被选中的底部Tab
    		         mui.fire(homepage,'changeView',{   
    		            item : 0,           //页面标识,第一个子窗口标识为0 以此类推
    		            direction : 'left', 
    		            itemName:curr_view.id
    		         });	
    					
    	         }			
          });
    
          //右滑隐藏新窗口,返回第一个子窗口
          second_view.drag(
               {
                 direction:'right',
                 moveMode:'followFinger'
               }, 
               {
                 view:curr_view,
                 moveMode:'follow'
               }, function(e){
    		    if(e.result === true){	  
                       mui.fire(homepage,'changeView',{
    			         item : 1,
    			         direction : 'right',
    			         itemName:second_view.id
    		          });						
    		     }			
          });
    });
  3. Home.html当用户点击底部Tap时对Webview进行切换。(思路就是对当前点击的Tap对应的webview显示在当前屏幕,在此webview前的则修改其style排列在左边或右边)

    	mui('.mui-bar-tab').on('tap', 'a', function(e) {
    		var targetTab = this.getAttribute('href');
    		//更换标题
    		title.innerHTML = this.querySelector('.mui-tab-label').innerHTML;
    		var curr = plus.webview.getWebviewById(targetTab);
    		curr.setStyle({left:'0px'}); //点击当前的选项卡将其移至屏幕中显示
    		for(var i=0;i<subpages.length;i++){
    			if(targetTab === subpages[i]){
    				var num1 = 100;
    				var num2 = -100;
    				for(var j = i+1 ; j<4 ;j++){ //在该webview之后的页面基于本页面右移
    					console.log('位移');
    					var other = plus.webview.getWebviewById(subpages[j]);		
    					other.setStyle({left: num1+'%'});
    					num1+=100;
    				}
    				for(var k = i-1 ; k>0 ;k--){ //在该webview之前的页面基于本页面左移
    					console.log('位移');
    					var other = plus.webview.getWebviewById(subpages[k]);		
    					other.setStyle({left: num2+'%'});
    				    num2-=100;							
    				}
    			}
    		}
    	});

     

© 著作权归作者所有

dalsen_c
粉丝 0
博文 3
码字总数 1366
作品 0
广州
程序员
私信 提问
移动端本地 H5 秒开方案探索与实现

欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 企业微信移动端项目中有需求要展示数据趋势的可视化图表,经过调研,最终决定以单页面 H5 来完成,对 APP 里的一些使用 H5 实现的...

腾讯云加社区
2018/06/11
0
0
【quickhybrid】H5和原生的职责划分

前言 在JSBridge实现后,前端网页与原生的交互已经通了,接下来就要开始规划API,明确需要提供哪一些功能来供前端调用。 但是在这之前,还有一点重要工作需要做: 明确H5与Native的职责划分,...

dailc
02/18
0
0
Vue项目快速输出到小程序、H5

跨端彻底,直接发行,无需二次开发; 通过Tree-Shaking摇出最小化内置组件等优化策略,提升性能 这应该是uni-app在H5平台的相对其他小程序框架更友好的地方 背景 随着微信小程序的火爆及百度...

CHB
2018/12/22
0
0
用typescript开发手势库 - (1)web开发常用手势有哪些?

这只是个开头 说在最前面,本文是一个系列文章的开头, 这个系列里我会讲如何用typescript开发一款支持pc和手机端的手势库any-touch, 以及通过jest让你的代码测试覆盖率100%. 今天我们先不写代...

铁皮饭盒
03/19
0
0
JS三教九流系列-Zepto.js-为移动端开发的类库

zepto.js的api地址 http://www.css88.com/doc/zeptojsapi/ 类库源码下载http://www.zeptojs.cn/ 滚动当前页面,看到这部分点击下载 和使用jquery一样,我们只要html页面引入即可。 zepto的a...

透笔度
2015/08/17
0
0

没有更多内容

加载失败,请刷新页面

加载更多

如何使用 rsync 备份 Linux 系统的一些介绍

备份一直是 Linux 世界的热门话题。回到 2017,David Both 为 Opensource.com 的读者在使用 rsync 备份 Linux 系统方面提了一些建议,在这年的更早时候,他发起了一项问卷调查询问大家,在 ...

Linux就该这么学
16分钟前
1
0
以太坊私有链搭建

https://blog.csdn.net/Blockchain_lemon/article/details/80589123

Moks角木
53分钟前
3
0
自律给我自信-为什么要自律

为什么要自律 混一天和努力一天 看不到任何差别 3天看不到任何变化 7天也看不到任何效果 但是 1个月后, 会看到话题不同 3个月后, 会看到气场不同 6个月后, 会看到距离不同 3年后, 会看到...

周大壮
53分钟前
4
0
读书replay计划说明

突然脑袋一闪,我有了这样一个主意:通过写博客的方式,将我阅读的书中的内容replay出来。 我一般会找着我感兴趣的书去读,一般也会读书中我感兴趣的章节,或者当下对我有用的章节,所以这个...

wanxiangming
55分钟前
1
0
CentOS7安装xrdp环境可实现远程桌面访问

CentOS7安装xrdp环境可实现远程桌面访问 2018-07-14 06:39:28 分类:运维 阅读(2051) 评论(0) 在"Ubuntu系统安装xrdp桌面客户端及实现远程连接桌面"文章中有分享过在Ubuntu系统中安装XRDP环境...

linjin200
今天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部