h***@sina.cn
h***@sina.cn
  • 发布:2016-07-01 17:15
  • 更新:2019-06-26 10:59
  • 阅读:3440

测试登入进入主页无限刷 求救大神

分类:MUI

<!doctype html>
<html>

<head>  
    <meta charset="UTF-8">  
    <title></title>  
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />  
    <link href="../css/mui.min.css" rel="stylesheet" />  
    <meta name="apple-mobile-web-app-capable" content="yes">  
    <meta name="apple-mobile-web-app-status-bar-style" content="black">  
    <style>  
    .imageView0{width: 100%;height: 140px;}  
    .imageView6{width: 100%;clear: both;margin-top: 4px;}  
    .imageView1{width: 32%;height: 100%;background-color: #0099FF;float: left;text-align: center;display: block;}  
    .imageView1 img{width: 100%;}  
    .imageView2{width: 32%;height: 100%;float: left;margin-left: 2%;text-align: center;display: block;}  
    .imageView2 img{width: 30%;}  
    .imageView3{width: 32%;height: 100%;background-color:#CC66CC ;float:right;text-align: center;display: block;}  
    .imageView3 img{width: 100%;}  
    .imageView4{width: 49%;height: 70px;background-color:#FF9999 ;float: left;display: block;}  
    .imageView4 img{width: 30%;margin-top: 14%;margin: auto;}  
    .imageView5{width: 49%;height: 70px;background-color:#FF6633 ;float: right;display: block;}  
    .imageView5 img{width: 30%;margin-top: 14%;margin: auto;}  
    </style>  
</head>  

<body>
<script src="../js/mui.min.js"></script>

<!--导航栏
<header class="mui-bar mui-bar-nav" style="background-color: #000000;">
<h1 class="mui-title"style="color: #FFFFFF;">橙消费系统首页</h1>
</header>
-->
<!--轮播视图-->
<div class="mui-slider"style="margin-top: 44px;">
<div class="mui-slider-group mui-slider-loop">
<!--支持循环,需要重复图片节点-->
<div class="mui-slider-item mui-slider-item-duplicate"><a href="#"><img src="../images/images/主页/u15.jpg" /></a></div>
<div class="mui-slider-item"><a href="#"><img src="../images/images/主页/u7.jpg" /></a></div>
<div class="mui-slider-item"><a href="#"><img src="../images/images/主页/u23.jpg"/></a></div>
<div class="mui-slider-item"><a href="#"><img src="../images/images/主页/u15.jpg" /></a></div>
<!--支持循环,需要重复图片节点-->
<div class="mui-slider-item mui-slider-item-duplicate"><a href="#"><img src="../images/images/主页/u7.jpg" /></a></div>
</div>
<div class="mui-slider-indicator">
<div class="mui-indicator mui-active"></div>
<div class="mui-indicator"></div>
</div>
</div>
<script>
var gallery = mui('.mui-slider');
gallery.slider({
interval:3100
});
</script>
<!--imageView -->
<div style="height: 4px;"></div>

<div class="imageView0">

<div class="imageView1">
<a href="govermentCompany.html">
<div style="width: 60%;margin: auto;margin-top: 25%;overflow: auto;">
<img src="../images/images/主页/u43.png">
<p style="color: #FFFFFF;">政企租机</p>
</div>
</a>
</div>

<div class="imageView2">
<div style="width: 100%;height: 48%;background-color:#FFCC33 ;overflow: auto;">
<img style="float: left;margin-top: 20%;" src="../images/images/主页/u51.png">
<p style="color: #FFFFFF;float: left;margin-top: 25%;width: 70%;">VIP业务</p>
</div>
<div style="width: 100%;height: 48%;background-color:#FFCCFF ;margin-top: 4%;overflow: auto;">
<img style="float: left;margin-top: 30%;" src="../images/images/主页/u55.png">
<p style="color: #FFFFFF;float: left;margin-top: 25%;width: 70%;">企业团购</p>
</div>
</div>

<div class="imageView3">
<div style="width: 60%;margin: auto;margin-top: 25%;overflow: auto;">
<img style="float: left;" src="../images/images/主页/u47.png">
<p style="color: #FFFFFF;">校园业务</p>
</div>
</div>

<div class="imageView6">
<div style="height: 4px"></div>

<div class="imageView4">
<div style="width: 80%;margin: auto;overflow: auto;margin-top: 10%;">
<img style="float: left;" src="../images/images/主页/u59.png">
<p style="color: #FFFFFF;float: right;margin-top: 10%;">信用卡业务</p>
</div>
</div>

<div class="imageView5">
<div style="width: 80%;margin: auto;overflow: auto;margin-top: 10%;">
<img style="float: left;" src="../images/images/主页/u63.png">
<p style="color: #FFFFFF;float: right;margin-top: 10%">工资卡业务</p>
</div>
</div>
</div>

    <header class="mui-bar mui-bar-nav">  
        <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>  
        <h1 id="title" class="mui-title">我的主页</h1>  
    </header>  
    <nav class="mui-bar mui-bar-tab">  
        <a id="defaultTab" class="mui-tab-item mui-active" href="homepage.html">  
            <span class="mui-icon mui-icon-home"></span>  
            <span class="mui-tab-label">我的主页</span>  
        </a>  
        <a class="mui-tab-item" href="weChat.html">  
            <span class="mui-icon mui-icon-weixin"><span class="mui-badge">9</span></span>  
            <span class="mui-tab-label">绑定微信</span>  
        </a>  
        <a class="mui-tab-item" href="news.html">  
            <span class="mui-icon mui-icon-chat"></span>  
            <span class="mui-tab-label">消息提醒</span>  
        </a>  
        <a class="mui-tab-item" href="mePage.html">  
            <span class="mui-icon mui-icon-contact"></span>  
            <span class="mui-tab-label">我的账户</span>  
        </a>  
    </nav>  
    <script src="../js/mui.min.js"></script>  
    <script type="text/javascript" charset="utf-8">  
         //mui初始化  
        mui.init();  
        var subpages = ['homepage.html', 'weChat.html', 'news.html', 'mePage.html'];  
        var subpage_style = {  
            top: '45px',  
            bottom: '51px'  
        };  

        var aniShow = {};  

         //创建子页面,首个选项卡页面显示,其它均隐藏;  
        mui.plusReady(function() {  
            var self = plus.webview.currentWebview();  
            for (var i = 0; i < 4; i++) {  
                var temp = {};  
                var sub = plus.webview.create(subpages[i], subpages[i], subpage_style);  
                self.append(sub);  
                if (i > 0) {  
                    sub.hide();  
                }else{  
                    temp[subpages[i]] = "true";  
                    mui.extend(aniShow,temp);  
                }  
                self.append(sub);  
            }  
        });  
         //当前激活选项  
        var activeTab = subpages[0];  
        var title = document.getElementById("title");  
         //选项卡点击事件  
        mui('.mui-bar-tab').on('tap', 'a', function(e) {  
            var targetTab = this.getAttribute('href');  
            if (targetTab == activeTab) {  
                return;  
            }  
            //更换标题  
            title.innerHTML = this.querySelector('.mui-tab-label').innerHTML;  
            //显示目标选项卡  
            //若为iOS平台或非首次显示,则直接显示  
            if(mui.os.ios||aniShow[targetTab]){  
                plus.webview.show(targetTab);  
            }else{  
                //否则,使用fade-in动画,且保存变量  
                var temp = {};  
                temp[targetTab] = "true";  
                mui.extend(aniShow,temp);  
                plus.webview.show(targetTab,"fade-in",300);  
            }  
            //隐藏当前;  
            plus.webview.hide(activeTab);  
            //更改当前活跃的选项卡  
            activeTab = targetTab;  
        });  
         //自定义事件,模拟点击“首页选项卡”  
        document.addEventListener('gohome', function() {  
            var defaultTab = document.getElementById("defaultTab");  
            //模拟首页点击  
            mui.trigger(defaultTab, 'tap');  
            //切换选项卡高亮  
            var current = document.querySelector(".mui-bar-tab>.mui-tab-item.mui-active");  
            if (defaultTab !== current) {  
                current.classList.remove('mui-active');  
                defaultTab.classList.add('mui-active');  
            }  
        });  
    </script>  

</body>
</html>

0 关注 分享

要回复文章请先登录注册

1***@qq.com

1***@qq.com

轻松
2019-06-26 10:59
zapoi

zapoi

我也遇到了,请问你解决了吗?
2016-11-22 10:10