HBuilder开发词典app（二）--实现点击和手指拖动变更页面

其他 2018-09-01 16:18:43 阅读次数: 0
版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/sureSand/article/details/81089642

首先建四个html，分别为sub1.html,sub2.html,sub3.html,sub4.html,分别对应底部四个选项卡，通过mui.init来建立联系：

<!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>
    <link href="css/mui.css" rel="stylesheet"/>

</head>
<body>
    <header class="mui-bar mui-bar-nav hBg">
     <div id="logo">
       <img src="imgs/logo.png"/>
     </div>
     <div id="searchBut">请输入要翻译的文本</div>
    </header>

    <nav class="mui-bar mui-bar-tab" id = "navFooter">
        <a class="mui-tab-item mui-active" id="nav1">
            <span class="mui-icon mui-icon-home"></span>
            <span class="mui-tab-label">首页</span>
        </a>
        <a class="mui-tab-item" id="nav2">
            <span class="mui-icon mui-icon-compose"></span>
            <span class="mui-tab-label">词典</span>
        </a>
        <a class="mui-tab-item" id="nav3">
            <span class="mui-icon mui-icon-star"></span>
            <span class="mui-tab-label">热点</span>
        </a>
        <a class="mui-tab-item" id="nav4">
            <span class="mui-icon mui-icon-gear"></span>
            <span class="mui-tab-label">我的</span>
        </a>
    </nav>
    <script src="js/mui.min.js"></script>
    <script type="text/javascript" src="js/h.js" ></script>
    <script type="text/javascript" charset="utf-8">
mui.init({
    subpages : [
        {
            url : 'sub1.html',
            id  : 'sub1.html',
            styles : {top :'44px', bottom:'44px', width:"100%"}
        },
        {
            url : 'sub2.html',
            id  : 'sub2.html',
            styles : {top :'44px', bottom:'44px', width:"100%", left:"100%"}
        },
        {
            url : 'sub3.html',
            id  : 'sub3.html',
            styles : {top :'44px', bottom:'44px', width:"100%", left:"200%"}
        },
        {
            url : 'sub4.html',
            id  : 'sub4.html',
            styles : {top :'44px', bottom:'44px', width:"100%", left:"300%"}
        }
    ]
});

//上面初始化四个页面，下面调用点击的函数进行操作       
h('#nav1').tap(function(){changSub(1);});
h('#nav2').tap(function(){changSub(2);});
h('#nav3').tap(function(){changSub(3);});
h('#nav4').tap(function(){changSub(4);});


function changSub(index){
    var sub1 = plus.webview.getWebviewById('sub1.html');
    var sub2 = plus.webview.getWebviewById('sub2.html');
    var sub3 = plus.webview.getWebviewById('sub3.html');
    var sub4 = plus.webview.getWebviewById('sub4.html');
    sub1.setStyle({left: (1 - index) * 100 + '%'});
    sub2.setStyle({left: (2 - index) * 100 + "%"});
    sub3.setStyle({left: (3 - index) * 100 + "%"});
    sub4.setStyle({left: (4 - index) * 100 + "%"});
}
</script>   
</body>
</html>

上面是点击更改选项的操作，下面是通过拖动页面进行操作，拖动页面的逻辑就直接在四个sub.html中写了，首先写sub1.html即首页，首页往右拖进入第二个页面，往左拖进入第四个页面，逻辑很简单，直接看代码：

<!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>
    <link href="css/mui.min.css" rel="stylesheet"/>
    <script src="js/mui.min.js"></script>
    <script type="text/javascript" charset="utf-8">
        mui.init();
        var _index, _self, _next,_prev;
        mui.plusReady(function(){
            _self = plus.webview.currentWebview();
           _next = plus.webview.getWebviewById('sub2.html');
           _prev = plus.webview.getWebviewById('sub4.html');
           _index = plus.webview.getLaunchWebview();
           //向右滑动
            _self.drag({
                direction : "left",
                moveMode  : "followFinger"
            },{
                view : _next,
                moveMode : "follow"
            },function(e){
                if(e.type == 'end' && e.result){
                    _index.evalJS('h("#navFooter").find("a").removeClass("mui-active"); h("#nav2").addClass("mui-active")')
                }
            });
            //向左滑动
            _self.drag({
                direction : "right",
                moveMode  : "followFinger"
            },{
                view : _prev,
                moveMode : "follow"
            },function(e){
                if(e.type == 'end' && e.result){
                    _index.evalJS('h("#navFooter").find("a").removeClass("mui-active"); h("#nav4").addClass("mui-active")')
                }
            });
        });
    </script>
</head>
<body>
    sub1
</body>
</html>

var _index, _self, _next,_prev;四个变量分别是入口页面，当前页面，下个页面，上个页面；
_self.drag函数就是拖动函数，里面的function(e){
if(e.type == 'end' && e.result){
_index.evalJS('h("#navFooter").find("a").removeClass("mui-active"); h("#nav4").addClass("mui-active")')
}

就是为了将下面底部选项卡的点亮样式先全部删除，再点亮入口页面。

最后以此逻辑分别复制粘贴其它三个页面，修改相应的subx.html就可以了，sub2.html:

<!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>
    <link href="css/mui.min.css" rel="stylesheet"/>
    <script src="js/mui.min.js"></script>
    <script type="text/javascript" charset="utf-8">
        mui.init();
        var _index, _self, _next,_prev;
        mui.plusReady(function(){
            _self = plus.webview.currentWebview();
           _next = plus.webview.getWebviewById('sub3.html');
           _prev = plus.webview.getWebviewById('sub1.html');
           _index = plus.webview.getLaunchWebview();
           //向右滑动
            _self.drag({
                direction : "left",
                moveMode  : "followFinger"
            },{
                view : _next,
                moveMode : "follow"
            },function(e){
                if(e.type == 'end' && e.result){
                    _index.evalJS('h("#navFooter").find("a").removeClass("mui-active"); h("#nav3").addClass("mui-active")')
                }
            });
            //向左滑动
            _self.drag({
                direction : "right",
                moveMode  : "followFinger"
            },{
                view : _prev,
                moveMode : "follow"
            },function(e){
                if(e.type == 'end' && e.result){
                    _index.evalJS('h("#navFooter").find("a").removeClass("mui-active"); h("#nav1").addClass("mui-active")')
                }
            });
        });
    </script>
</head>
<body>
    sub2
</body>
</html>

sub3.html:

<!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>
    <link href="css/mui.min.css" rel="stylesheet"/>
    <script src="js/mui.min.js"></script>
    <script type="text/javascript" charset="utf-8">
        mui.init();
        var _index, _self, _next,_prev;
        mui.plusReady(function(){
            _self = plus.webview.currentWebview();
           _next = plus.webview.getWebviewById('sub4.html');
           _prev = plus.webview.getWebviewById('sub2.html');
           _index = plus.webview.getLaunchWebview();
           //向右滑动
            _self.drag({
                direction : "left",
                moveMode  : "followFinger"
            },{
                view : _next,
                moveMode : "follow"
            },function(e){
                if(e.type == 'end' && e.result){
                    _index.evalJS('h("#navFooter").find("a").removeClass("mui-active"); h("#nav4").addClass("mui-active")')
                }
            });
            //向左滑动
            _self.drag({
                direction : "right",
                moveMode  : "followFinger"
            },{
                view : _prev,
                moveMode : "follow"
            },function(e){
                if(e.type == 'end' && e.result){
                    _index.evalJS('h("#navFooter").find("a").removeClass("mui-active"); h("#nav2").addClass("mui-active")')
                }
            });
        });
    </script>
</head>
<body>
    sub3
</body>
</html>

sub4.html:

<!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>
    <link href="css/mui.min.css" rel="stylesheet"/>
    <script src="js/mui.min.js"></script>
    <script type="text/javascript" charset="utf-8">
        mui.init();
        var _index, _self, _next,_prev;
        mui.plusReady(function(){
            _self = plus.webview.currentWebview();
           _next = plus.webview.getWebviewById('sub1.html');
           _prev = plus.webview.getWebviewById('sub3.html');
           _index = plus.webview.getLaunchWebview();
           //向右滑动
            _self.drag({
                direction : "left",
                moveMode  : "followFinger"
            },{
                view : _next,
                moveMode : "follow"
            },function(e){
                if(e.type == 'end' && e.result){
                    _index.evalJS('h("#navFooter").find("a").removeClass("mui-active"); h("#nav1").addClass("mui-active")')
                }
            });
            //向左滑动
            _self.drag({
                direction : "right",
                moveMode  : "followFinger"
            },{
                view : _prev,
                moveMode : "follow"
            },function(e){
                if(e.type == 'end' && e.result){
                    _index.evalJS('h("#navFooter").find("a").removeClass("mui-active"); h("#nav3").addClass("mui-active")')
                }
            });
        });
    </script>
</head>
<body>
    sub4
</body>
</html>

代码自取：https://github.com/lightTrace/Hbuilder-app，请注意这是完整代码，有后面内容的可自行跳过辨别！

猜你喜欢

转载自blog.csdn.net/sureSand/article/details/81089642
今日推荐
NetBSD 禁止提交由 AI 生成的代码
Apache Doris 2.0.10 版本正式发布！
开源日报 | 大模型开战；大模型独角兽被曝卖身；周鸿祎建议谷歌开源所有产品；最大开源AI社区提供1000万美元共享GPU
开源日报 | Chrome内置Gemini的意义不在于Gemini；中国AI追随之路的五大误区；ECharts创始人“下海”养鱼；谷歌I/O开发者大会什么都有，只是没有惊喜
微软回应中国区AI团队“打包赴美”传闻
基于大语言模型的开源知识库问答系统 MaxKB GitHub Star 数量突破 5,000 个！
周排行
女程序员是这样被恶搞的
B/S 和 C/S 的优缺点
vector一直申请会怎样？
座头鲸识别比赛(Humpback Whale Identification)总结
Linux高性能服务器编程——I/O复用 select
Mysql连接数据库（当包使用）
通过URI获取的文件路径为null的解决方法
1022-Primes on Interval(素数筛选+二分查找) ZCMU
Python出现： TypeError: expected string or buffer
bzoj2434: [Noi2011]阿狸的打字机 ac自动机+树状数组
每日归档
更多
2024-05-18(4)
2024-05-17(34)
2024-05-16(6)
2024-05-15(24)
2024-05-14(0)
2024-05-13(18)
2024-05-12(0)
2024-05-11(38)
2024-05-10(38)
2024-05-09(35)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022