GODVer
GODVer
  • 发布:2015-09-14 11:23
  • 更新:2015-09-15 11:16
  • 阅读:1799

div侧滑使用后,页面跳转不能使用

分类:MUI
2015-09-14 11:23 负责人:无 分享
已邀请:
BoredApe

BoredApe - 有问题就会有答案。

上代码,或测试demo

GODVer

GODVer (作者)

<!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">  

        <!--标准mui.css-->  
        <link rel="stylesheet" href="./css/mui.min.css">  
    </head>  

    <body>  
        <!-- 侧滑导航根容器 -->  
        <div class="mui-off-canvas-wrap mui-draggable">  
          <!-- 菜单容器 -->  
          <aside class="mui-off-canvas-left">  
            <div class="mui-scroll-wrapper">  
              <div class="mui-scroll">  
                <!-- 菜单具体展示内容 -->  
                ...  
              <div>  
            </div>  
          </aside>  
          <!-- 主页面容器 -->  
          <div class="mui-inner-wrap">  
            <!-- 主页面标题 -->  
           <header class="mui-bar mui-bar-nav">  
                <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>  
                <a class="mui-icon mui-icon-bars mui-pull-right"></a>  
                <h1 class="mui-title">侧滑</h1>  
           </header>  
            <!-- 底部选项卡 -->  

                <nav class="mui-bar mui-bar-tab">  
                    <a class="mui-tab-item mui-active">  
                        <span class="mui-icon mui-icon-home"></span>  
                        <span class="mui-tab-label">首页</span>  
                    </a>  
                    <a class="mui-tab-item">  
                        <span class="mui-icon mui-icon-phone"></span>  
                        <span class="mui-tab-label">电话</span>  
                    </a>  
                    <a class="mui-tab-item">  
                        <span class="mui-icon mui-icon-email"></span>  
                        <span class="mui-tab-label">邮件</span>  
                    </a>  
                    <a class="mui-tab-item">  
                        <span class="mui-icon mui-icon-gear"></span>  
                        <span class="mui-tab-label">设置</span>  
                    </a>  
                </nav>  
            <div class="mui-content mui-scroll-wrapper">  
              <div class="mui-scroll">  
                        <!-- 主界面具体展示内容 -->  
                         <ul class="mui-table-view mui-grid-view mui-grid-9">  
                    <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="info.html">  
                            <span class="mui-icon mui-icon-info"></span>  
                            <div class="mui-media-body">信息</div></a>  
                    </li>  
                    <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">  
                            <span class="mui-icon mui-icon-email"><span class="mui-badge">5</span></span>  
                            <div class="mui-media-body">Email</div></a>  
                    </li>  
                    <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="make.html">  
                            <span class="mui-icon mui-icon-starhalf"></span>  
                            <div class="mui-media-body">名片</div></a>  
                    </li>  

                </ul>   
              </div>  
            </div>    
          </div>  
        </div>  

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

    </body>  

</html>
DCloud_UNI_FXY

DCloud_UNI_FXY

监听tap事件,document.location.href=this.href;

GODVer

GODVer (作者)

还是不可以,主要是点不到那个a标签

<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3" id="info">
<a href="info.html">
<span class="mui-icon mui-icon-info"></span>
<div class="mui-media-body">信息</div>
</a>
</li>

GODVer

GODVer (作者)

我用查看器可以点到,直接点web端点不到

DCloud_UNI_FXY

DCloud_UNI_FXY

贴完整代码

GODVer

GODVer (作者)

<!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">  

    <!--标准mui.css-->  
    <link rel="stylesheet" href="./css/mui.min.css">  
</head>  

<body>  
    <!-- 侧滑导航根容器 -->  
    <div class="mui-off-canvas-wrap mui-draggable mui-slide-in">  
      <!-- 菜单容器 -->  
      <aside class="mui-off-canvas-left">  
        <div class="mui-scroll-wrapper">  
          <div class="mui-scroll">  
            <!-- 菜单具体展示内容 -->  
            ...  
          </div>  
        </div>  
      </aside>  
             <!-- 主页面容器 -->  
            <div class="mui-inner-wrap">  
            <!-- 主页面标题 -->  
           <header class="mui-bar mui-bar-nav">  
                <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>  
                <a class="mui-icon mui-icon-bars mui-pull-right" id="cehua"></a>  
                <h1 class="mui-title">侧滑</h1>  
           </header>  
            <!-- 底部选项卡 -->  

                <nav class="mui-bar mui-bar-tab">  
                    <a class="mui-tab-item mui-active">  
                        <span class="mui-icon mui-icon-home"></span>  
                        <span class="mui-tab-label">首页</span>  
                    </a>  
                    <a class="mui-tab-item">  
                        <span class="mui-icon mui-icon-phone"></span>  
                        <span class="mui-tab-label">电话</span>  
                    </a>  
                    <a class="mui-tab-item">  
                        <span class="mui-icon mui-icon-email"></span>  
                        <span class="mui-tab-label">邮件</span>  
                    </a>  
                    <a class="mui-tab-item">  
                        <span class="mui-icon mui-icon-gear"></span>  
                        <span class="mui-tab-label">设置</span>  
                    </a>  
            </nav>  
            <div class="mui-content mui-scroll-wrapper">  
                <div class="mui-scroll">  
                        <!-- 主界面具体展示内容 -->  
                         <ul class="mui-table-view mui-grid-view mui-grid-9">  
                        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3" id="info">  
                                <a href="info.html">  
                                <span class="mui-icon mui-icon-info"></span>  
                                <div class="mui-media-body">信息</div>  
                                </a>  
                        </li>  
                        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">  
                                <span class="mui-icon mui-icon-email"><span class="mui-badge">5</span></span>  
                                <div class="mui-media-body">Email</div></a>  
                        </li>  
                        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">  
                                <a href="make.html">  
                                <span class="mui-icon mui-icon-starhalf"></span>  
                                <div class="mui-media-body">名片</div>  
                                </a>  
                        </li>  

                        </ul>   
                </div>  
            </div>    
      </div>  
</div>  
    <script src="js/mui.min.js">  

        mui('.mui-medi').on('tap','a',function(){  
            document.location.href=this.href;  
        });  
    </script>  
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js">  
    </script>  
</body>  

</html>

GODVer

GODVer (作者)

点不到下面的a链接放在侧滑div里面

GODVer

GODVer (作者)

直接用pc的浏览器倒是可以点到 放在移动端就点不到,app也是点不到

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