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

lightTrace發表於2018-07-17

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

HBuilder開發詞典app（一）--基本頁面佈局
2018-07-16
UIAPP
HBuilder開發詞典app（三）--主頁圖文輪播和新聞列表
2018-07-18
UIAPP
HBuilder開發詞典app（四）--呼叫有道api完成翻譯功能
2018-07-19
UIAPPAPI
點選右則剪頭展開和收起頁面選單
2018-01-18
Testing Flutter apps翻譯-點選，拖動和輸入文字
2019-04-23
FlutterAPP
app直播原始碼，平臺登入頁面實現和修改密碼頁面實現
2022-06-10
APP原始碼密碼
中文彩色驗證碼實現（變形/噪點/點選更換
2008-01-13
GAT新Bug：點選分頁按鈕頁面沒變
2017-07-13
直播軟體app開發，HTML和CSS分別實現註冊頁面表單
2023-01-31
APPHTMLCSS
jQuery + jQuery Mobile 實現省市二級下拉選單頁面
2014-06-03
jQuery
Jquery實現滑鼠拖動改變div高度
2017-06-25
jQuery
移動端觸屏拖動頁面滾動效果
2017-02-22
iOS開發之微信聊天頁面實現
2015-12-19
iOS
javascript實現的點選不同提交按鈕實現提交到不同頁面
2017-03-31
JavaScript
javascript對點選事件和拖動事件的區分
2018-08-15
JavaScript事件
點選按鈕實現切換頁面背景顏色效果
2017-03-18
實現頁面載入的變換和位移動畫效果
2016-08-06
動畫
Flutter 實現底部擴散模糊動畫（二）頁面互動
2019-08-23
Flutter動畫
基於vite多頁面實現多端同構開發和部署
2024-03-27
Vite
成品直播原始碼，html頁面點選按鈕實現頁面跳轉的兩種方法
2022-05-23
原始碼HTML
全新升級！有道詞典筆與有道詞典App打通軟硬一體助力更互動式學習體驗
2020-08-21
APP
直播app開發，使用koa和MongoDB實現分頁和模糊查詢
2023-04-07
APPMongoDB
短視訊app開發，點選跳轉到另一個頁面時的過場動畫
2021-12-28
APP動畫
App啟動廣告頁的實現和封裝
2016-09-08
APP封裝
UWP 開發初階 Chapter 5 - 實現頁面導航，和頁面內部分割槽域導航
2018-07-25
APT
vueusejs實現拖動
2024-03-14
VueJS
語音交友app開發，點選按鈕出現彈窗的實現方式
2021-10-12
APP
webpack + Vue + Hbuilder 打包成App，混合app開發，一個人搞定
2018-07-23
WebVueUIAPP
一點關於移動端頁面開發的總結
2018-03-10
js實現的拖動改變視窗大小功能
2017-04-06
JS
ABP後臺管理頁面AdminLTE框架，實現選單項點選後，選單展開當前選單項高亮
2024-04-12
框架
將經典頁面轉換成現代客戶端頁面
2018-08-06
客戶端
Android開發如何使用選擇器（selector）來實現點選按鈕變色
2019-02-26
Android
android短影片開發，點選兩次實現不同點選效果的實現方式
2023-09-19
Android
小程式頁面動態配置實現
2019-02-04
WPF手動實現切換頁面
2024-08-28
網頁點選實現下載效果
2017-02-27
網頁
移動Web單頁應用開發實踐——頁面結構化
2018-05-16
Web

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

相關文章