HBuilder開發詞典app(二)--實現點選和手指拖動變更頁面
首先建四個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(一)--基本頁面佈局UIAPP
- HBuilder開發詞典app(三)--主頁圖文輪播和新聞列表UIAPP
- HBuilder開發詞典app(四)--呼叫有道api完成翻譯功能UIAPPAPI
- app直播原始碼,平臺登入頁面實現和修改密碼頁面實現APP原始碼密碼
- 短視訊app開發,點選跳轉到另一個頁面時的過場動畫APP動畫
- 直播軟體app開發,HTML和CSS分別實現註冊頁面表單APPHTMLCSS
- javascript對點選事件和拖動事件的區分JavaScript事件
- 直播app開發,使用koa和MongoDB實現分頁和模糊查詢APPMongoDB
- vueusejs實現拖動VueJS
- 全新升級!有道詞典筆與有道詞典App打通 軟硬一體助力更互動式學習體驗APP
- Testing Flutter apps翻譯-點選,拖動和輸入文字FlutterAPP
- Flutter 實現底部擴散模糊動畫(二)頁面互動Flutter動畫
- Android開發 如何使用選擇器(selector) 來實現點選按鈕變色Android
- 語音交友app開發,點選按鈕出現彈窗的實現方式APP
- webpack + Vue + Hbuilder 打包成App,混合app開發,一個人搞定WebVueUIAPP
- 基於vite多頁面實現多端同構開發和部署Vite
- 成品直播原始碼,html頁面點選按鈕實現頁面跳轉的兩種方法原始碼HTML
- 直播app開發,首頁輪播圖效果實現APP
- 直播帶貨app原始碼,實現移動端的按鈕拖動APP原始碼
- android短影片開發,點選兩次實現不同點選效果的實現方式Android
- ABP後臺管理頁面AdminLTE框架,實現選單項點選後,選單展開當前選單項高亮框架
- uni-APP 新增頁面實現路由跳轉APP路由
- 直播系統中網頁類似app頁面切換動畫的實現方式網頁APP動畫
- UWP 開發初階 Chapter 5 - 實現頁面導航,和頁面內部分割槽域導航APT
- 點選頁面愛心效果
- uni-app 實現滑動列表(slider)頁面效果 完整程式碼示例APPIDE
- 【前端詞典】實現 Canvas 下雪背景引發的效能思考前端Canvas
- App啟動頁面優化APP優化
- 一點關於移動端頁面開發的總結
- 將經典頁面轉換成現代客戶端頁面客戶端
- SAP Commerce開發之如何找到某個頁面對應的JSP實現頁面JS
- 使用RxJava實現ImageView的拖動、旋轉和縮放RxJavaView
- 小程式頁面動態配置實現
- WPF手動實現切換頁面
- 【新手指南】App原型設計:如何快速實現這6種互動效果?APP原型
- JavaScript 點選表格行實現背景變色JavaScript
- App《最美詩詞》開發 -- 開篇APP
- 移動Web單頁應用開發實踐——頁面結構化Web