HBuilder開發詞典app（二）--實現點選和手指拖動變更頁面

lightTrace發表於2018-07-17
UIAPP

首先建四個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，請注意這是完整程式碼，有後面內容的可自行跳過辨別！

相關文章