3***@qq.com
3***@qq.com
  • 发布:2019-10-22 23:05
  • 更新:2019-10-22 23:05
  • 阅读:757

mui-bar-tab 阴影显示不出来

分类:MUI

用了mui-bar-tab ,但是在手机上调试的时候,阴影显示 不出来,在社区也没有看到相关的帖子。请教怎么解决这个问题。

<!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.css" rel="stylesheet" />  
        <link href="css/iconfont.css" rel="stylesheet" />  
        <script src="js/mui.js"></script>  
        <script type="text/javascript">  
            mui.init()  
        </script>  
    </head>  
    <body>  

        <nav class="mui-bar mui-bar-tab" style="box-shadow: 0px -10px 10px rgba(0,0,0,0.1)">  
            <a class="mui-tab-item" href="sub1.html" >  
                <span class="mui-icon iconfont iconfoot"></span>  
                <span class="mui-tab-label">首页</span>  
            </a>  
            <a class="mui-tab-item" href="sub2.html">  
                <span class="mui-icon iconfont iconfoot3"></span>  
                <span class="mui-tab-label">奖杯</span>  
            </a>  
            <a class="mui-tab-item" href="activity.html">  
                <span class="mui-icon iconfont iconfoot1"></span>  
                <span class="mui-tab-label">活动</span>  
            </a>  
            <a class="mui-tab-item  mui-active" href="user.html">  
                <span class="mui-icon iconfont iconfoot2"></span>  
                <span class="mui-tab-label">我的</span>  
            </a>  
        </nav>  

    </body>  

</html>  
<script type="text/javascript">  
    var subPages=['user.html','sub2.html','activity.html','sub4.html'];  
    var subPageStyle={  
        top:'0',  
        bottom:'50px'  
    }  
    //使用硬件系统,必须用真机运行  
    mui.plusReady(function(){  
        var self=plus.webview.currentWebview();//获取当前页面窗体  
        for(var i=0;i<subPages.length;i++){           
            var sub=plus.webview.create(subPages[i],subPages[i],subPageStyle);//给四个子页面创建窗体  
            sub.hide();//将4个子页面隐藏  
            self.append(sub);//将创建的子窗体追加到主页面  
        }  
        plus.webview.show(subPages[0]);  
    })  
    //给mui-bar-tab下的每一个a标签绑定tap事件  
    mui(".mui-bar-tab").on("tap","a",function(e){  
        var tagPage = this.getAttribute("href");  
        plus.webview.show(tagPage,"fade-in",100);  
    })  

</script>

以下是加了:box-shadow: 0px -10px 10px rgba(0,0,0,0.1),电脑上显示有阴影。

以下是手机调试效果,阴影不见了。

2019-10-22 23:05 负责人:无 分享
已邀请:

该问题目前已经被锁定, 无法添加新回复