【12】MUI 仿拼多多 全部訂單（頂部選單欄，可左右滑動，webview模式）
阿新 • • 發佈：2018-11-09
<!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" /> <style> .mui-bar a { color: #E02D26; } body { background: white; } #topItem { background: white; border-bottom: 1px solid #EEEEEE; } .mui-slider .mui-segmented-control.mui-scroll-wrapper { height: 40px; } .mui-slider .mui-segmented-control .mui-control-item { line-height: 37px; } .mui-segmented-control.mui-scroll-wrapper .mui-control-item { padding: 0 12px } .mui-slider .mui-segmented-control.mui-segmented-control-inverted .mui-control-item { border-bottom: 2px solid white; color: black; } .mui-slider .mui-segmented-control.mui-segmented-control-inverted .mui-control-item.mui-active { border-bottom: 2px solid #E02D26; color: #E02D26; font-weight: bold; } .mui-slider-group .mui-slider-item { height: 0px; } </style> </head> <body> <header class="mui-bar mui-bar-nav"> <a class="mui-icon mui-icon-left-nav mui-pull-left mui-action-back"></a> <h1 class="mui-title">我的訂單</h1> </header> <div class="mui-content"> <div id="slider" class="mui-slider"> <div id="topItem" class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted"> <div class="mui-scroll" id="top-scroll"> <a class='mui-control-item mui-active' href="#item1mobile" data-wid="OrderAll.html">全部</a> <a class='mui-control-item' href="#item2mobile" data-wid="WaitPayment.html">待付款</a> <a class='mui-control-item' href="#item3mobile" data-wid="WaitShared.html">待分享</a> <a class='mui-control-item' href="#item4mobile" data-wid="WaitDelivery.html">待發貨</a> <a class='mui-control-item' href="#item5mobile" data-wid="WaitReceipt.html">待收貨</a> <a class='mui-control-item' href="#item6mobile" data-wid="WaitEvaluate.html">待評價</a> </div> </div> <!--勿刪除以下程式碼，作用是保證頂部選單動畫--> <div class="mui-slider-group" style="height: 0px;"> <div id="item1mobile" class="mui-slider-item mui-control-content mui-active"></div> <div id="item2mobile" class="mui-slider-item mui-control-content"></div> <div id="item3mobile" class="mui-slider-item mui-control-content"></div> <div id="item4mobile" class="mui-slider-item mui-control-content"></div> <div id="item5mobile" class="mui-slider-item mui-control-content"></div> <div id="item6mobile" class="mui-slider-item mui-control-content"></div> </div> </div> </div> <script src="../../../js/mui.js"></script> <script type="text/javascript" src="../../../js/jquery-1.11.0.min.js"></script> <script type="text/javascript"> mui.init(); var subpage_style = { top: '84px', bottom: '0px', render: 'always' }; var subLen = 6; var activeIndex = 0; var targetIndex = 0; // 子頁面滑動切換事件 window.addEventListener("swipe_event", function(event) { // 獲取方向以及索引 var direction = event.detail.direction; activeIndex = event.detail.index; if(direction == "left") { if(activeIndex == subLen - 1) { console.log("最右邊一頁了"); return; } targetIndex = activeIndex + 1; } else { if(activeIndex == 0) { console.log("最左邊一頁了"); return; } targetIndex = activeIndex - 1; } switchPage("switch", targetIndex); }); //切換頁面 function switchPage(_event, _target) { mui(".mui-control-item").each(function(i, e) { if(i == _target) $(this).addClass("mui-active"); else $(this).removeClass("mui-active"); }) var targetTab = $($("#top-scroll").children()[_target]).attr("data-wid") var _subWv = plus.webview.getWebviewById(targetTab); if(!_subWv) { var postUrl = "../MyOrder/" + targetTab; _subWv = plus.webview.create(postUrl, targetTab, subpage_style); self.append(_subWv); } _subWv.show(); plus.webview.getWebviewById(activeTab).hide('none'); activeTab = targetTab; } var activeTab = null; var self = null; var gotoIndex = null; mui.plusReady(function() { self = plus.webview.currentWebview(); gotoIndex = self.gotoIndex; if(gotoIndex != null) { activeTab = self.activeTab; var sub = plus.webview.create("../MyOrder/" + activeTab, activeTab, subpage_style); self.append(sub); mui(".mui-control-item").each(function(i, e) { if(i == gotoIndex) $(this).addClass("mui-active"); else $(this).removeClass("mui-active"); }) } else { activeTab = "OrderAll.html"; var sub = plus.webview.create("../MyOrder/OrderAll.html", "OrderAll.html", subpage_style); self.append(sub); } mui(".mui-scroll").on("tap", ".mui-control-item", function(e) { var targetTab = this.getAttribute('data-wid'); if(targetTab == activeTab) { return; } var _subWv = plus.webview.getWebviewById(targetTab); if(!_subWv) { var postUrl = "../MyOrder/" + targetTab; _subWv = plus.webview.create(postUrl, targetTab, subpage_style); self.append(_subWv); } _subWv.show(); plus.webview.getWebviewById(activeTab).hide('none'); activeTab = targetTab; }); }) mui.back = function() { var _self = plus.webview.currentWebview(); _self.close("auto"); } </script> </body> </html>