那些年mui webview遇到的坑

最新推荐文章于 2022-08-10 10:09:07 发布

black--berry

最新推荐文章于 2022-08-10 10:09:07 发布

阅读量3.1k

点赞数

分类专栏： mui html 文章标签： mui webview那些年坑倒一批

本文链接：https://blog.csdn.net/qq_37195300/article/details/78607729

版权

html 同时被 2 个专栏收录

13 篇文章 0 订阅

订阅专栏

mui

6 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title>Hello MUI</title>
       <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
       <meta name="apple-mobile-web-app-capable" content="yes">
       <meta name="apple-mobile-web-app-status-bar-style" content="black">
       <link rel="stylesheet" href="../css/mui.min.css">
       <style>
           html,
           body {
               background-color: #efeff4;
           }
           .mui-bar~.mui-content .mui-fullscreen {
               top: 44px;
               height: auto;
           }

           .mui-pull-top-tips {
               position: absolute;
               top: -20px;
               left: 50%;
               margin-left: -25px;
               width: 40px;
               height: 40px;
               border-radius: 100%;
               z-index: 1;
           }

           .mui-bar~.mui-pull-top-tips {
               top: 24px;
           }
           .mui-pull-top-wrapper {
               width: 42px;
               height: 42px;
               display: block;
               text-align: center;
               background-color: #efeff4;
               border: 1px solid #ddd;
               border-radius: 25px;
               background-clip: padding-box;
               box-shadow: 0 4px 10px #bbb;
               overflow: hidden;
           }
           .mui-pull-top-tips.mui-transitioning {
               -webkit-transition-duration: 200ms;
               transition-duration: 200ms;
           }

           .mui-pull-top-tips .mui-pull-loading {
               margin: 0;
           }

           .mui-pull-top-wrapper .mui-icon,
           .mui-pull-top-wrapper .mui-spinner {
               margin-top: 7px;
           }

           .mui-pull-top-wrapper .mui-icon.mui-reverse {
               /*-webkit-transform: rotate(180deg) translateZ(0);*/
           }

           .mui-pull-bottom-tips {
               text-align: center;
               background-color: #efeff4;
               font-size: 15px;
               line-height: 40px;
               color: #777;
           }

           .mui-pull-top-canvas {
               overflow: hidden;
               background-color: #fafafa;
               border-radius: 40px;
               box-shadow: 0 4px 10px #bbb;
               width: 40px;
               height: 40px;
               margin: 0 auto;
           }

           .mui-pull-top-canvas canvas {
               width: 40px;
           }
           .mui-slider-indicator.mui-segmented-control {
               background-color: #efeff4;
           }
       </style>
   </head>
   <body>
       <header class="mui-bar mui-bar-nav" style="background: #75a2ff;">
           <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left" style="color: #FFFFFF;"></a>
           <h1 class="mui-title" id="gw_list_title">待办公文</h1>
       </header>
       <div class="mui-content">
           <div id="slider" class="mui-slider mui-fullscreen">
               <div id="sliderSegmentedControl" class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
                   <div class="mui-scroll">
                       <a class="mui-control-item mui-active" href="#item1mobile" data-wid="db_gw.html">
                           待办
                       </a>
                       <a class="mui-control-item" href="#item2mobile" data-wid="yb_gw.html">
                           已办
                       </a>
                       <a class="mui-control-item" href="#item3mobile" data-wid="dy_gw.html">
                           待阅
                       </a>
                       <a class="mui-control-item" href="#item4mobile" data-wid="yy_gw.html">
                           已阅
                       </a>
                       <a class="mui-control-item" href="#item5mobile" data-wid="my_gw.html">
                           收文
                       </a>
                   </div>
               </div>
           </div>
       </div>
       <script src="../js/mui.min.js"></script>
       <script src="../js/gw.js"></script>
       <script src="../js/common.min.js"></script>
       <script src="../js/webviewGroup.js" type="text/javascript" charset="utf-8"></script>
       <script>
           mui.init();
           mui.plusReady(function() {
               var gw_list_title = document.getElementById('gw_list_title');
               var group = new webviewGroup("viewgroup", {
                   items: [{
                       id: "db_gw.html",
                       url: "db_gw.html",
                       extras: {
                           workStatus:"0",
                       }
                   }, {
                       id: "yb_gw.html",
                       url: "yb_gw.html",
                       extras: {
                           workStatus:"101",
                       }
                   }, {
                       id: "dy_gw.html",
                       url: "dy_gw.html",
                       extras: {
                           workStatus:"2",
                       }
                   }, {
                       id: "yy_gw.html",
                       url: "yy_gw.html",
                       extras: {
                           workStatus:"102",
                       }
                   }, {
                       id: "my_gw.html",
                       url: "my_gw.html",
                       extras: {
                           workStatus:"15",
                       }
                   }],
                   onChange: function(obj) {
                       var c = document.querySelector(".mui-control-item.mui-active");
                       if(c) {
                           c.classList.remove("mui-active");
                       }
                       var aa=parseInt(obj.index) + 1;
                       if(aa==1){
                           gw_list_title.innerHTML='待办公文';
                       }else if(aa==2){
                           gw_list_title.innerHTML='已办公文';
                       }else if(aa==3){
                           gw_list_title.innerHTML='待阅公文';
                       }else if(aa==4){
                           gw_list_title.innerHTML='已阅公文';
                       }else if(aa==5){
                           gw_list_title.innerHTML='我的文件';
                       }
                   document.querySelector(".mui-scroll .mui-control-item:nth-child(" + (parseInt(obj.index) + 1) + ")").classList.add("mui-active");
                   }
               });
               mui(".mui-scroll").on("tap", ".mui-control-item", function(e) {
                   var wid = this.getAttribute("data-wid");
                   group.switchTab(wid);
               });
           });
           mui.back = function() {
               var _self = plus.webview.currentWebview();
               _self.close("auto");
           }
       </script>
   </body>
</html>