注册 登录
struggle轶事
struggle轶事
  • 发布：2015-04-16 15:29
  • 更新：2015-04-16 15:52
  • 阅读：1361

侧滑导航 bug

分类：MUI

侧滑导航效果实现之后 页面展示只能显示第一屏 是怎么回事

2015-04-16 15:29 负责人:无 分享

没有找到相关结果

    已邀请:
    DCloud_UNI_FXY

    DCloud_UNI_FXY

    使用的哪种侧滑导航

    2015-04-16 15:36 分享

    • struggle轶事 (作者)

      css 组件里面的侧滑导航(左侧)

      2015-04-16 15:39

    评论 取消
    struggle轶事

    struggle轶事 (作者)

    css 组件里面的侧滑导航(左侧)

    2015-04-16 15:38 分享
    DCloud_UNI_FXY

    DCloud_UNI_FXY

    如果使用了区域滚动，需要初始化scroll控件。

    mui('.mui-scroll-wrapper').scroll();

    2015-04-16 15:52 分享

    • struggle轶事 (作者)

      没有使用区域滚动 只是用了mui组件里面的代码 然后就只能显示第一屏了

      2015-04-16 15:55

    • DCloud_UNI_FXY

      贴出来完整代码

      2015-04-16 16:10

    • struggle轶事 (作者)

      <!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">  
      
<script src="js/mui.min.js"></script>

      </head>

      <body>

      <div class="mui-off-canvas-wrap mui-draggable">

      <div class="mui-inner-wrap">

      <header class="mui-bar mui-bar-nav">

      <a href="#offCanvas" class="mui-icon mui-icon-bars mui-pull-left"></a>

      <a class="mui-icon mui-icon-close mui-pull-right"></a>

      <h1 class="mui-title">Container with slide menu</h1>

      </header>

      <aside id="offCanvas" class="mui-off-canvas-left">

      <ul class="mui-table-view mui-table-view-chevron mui-table-view-inverted">

      <li class="mui-table-view-cell">

      <a class="mui-navigate-right">

      Item 1

      </a>

      </li>

      <li class="mui-table-view-cell">

      <a class="mui-navigate-right">

      Item 2

      </a>

      </li>

      <li class="mui-table-view-cell">

      <a class="mui-navigate-right">

      Item 3

      </a>

      </li>

      </ul>

      </aside>

      <div class="mui-content">

      <ul class="mui-table-view mui-table-view-chevron">

      <li id="offCanvas_switch" class="mui-table-view-cell">

      整体滑动

      <div class="mui-switch mui-active">

      <div class="mui-switch-handle"></div>

      </div>

      </li>

      </ul>

      <ul class="mui-table-view mui-table-view-chevron">

      <li class="mui-table-view-cell">

      <a class="mui-navigate-right">

      Item 1

      </a>

      </li>

      <li class="mui-table-view-cell">

      <a class="mui-navigate-right">

      Item 2

      </a>

      </li>

      <li class="mui-table-view-cell">

      <a class="mui-navigate-right">

      Item 3

      </a>

      </li>

      <li class="mui-table-view-cell">

      <a class="mui-navigate-right">

      Item 4

      </a>

      </li>

      <li class="mui-table-view-cell">

      <a class="mui-navigate-right">

      Item 5

      </a>

      </li>

      <li class="mui-table-view-cell">

      <a class="mui-navigate-right">

      Item 6

      </a>

      </li>

      <li class="mui-table-view-cell">

      <a class="mui-navigate-right">

      Item 7

      </a>

      </li>

      <li class="mui-table-view-cell">

      <a class="mui-navigate-right">

      Item 8

      </a>

      </li>

      <li class="mui-table-view-cell">

      <a class="mui-navigate-right">

      Item 9

      </a>

      </li>

      <li class="mui-table-view-cell">

      <a class="mui-navigate-right">

      Item 10

      </a>

      </li>

      <li class="mui-table-view-cell">

      <a class="mui-navigate-right">

      Item 11

      </a>

      </li>

      <li class="mui-table-view-cell">

      <a class="mui-navigate-right">

      Item 12

      </a>

      </li>

      <li class="mui-table-view-cell">

      <a class="mui-navigate-right">

      Item 13

      </a>

      </li>

      <li class="mui-table-view-cell">

      <a class="mui-navigate-right">

      Item 14

      </a>

      </li>

      <li class="mui-table-view-cell">

      <a class="mui-navigate-right">

      Item 15

      </a>

      </li>

      </ul>

      </div>

      <!-- off-canvas backdrop -->

      <div class="mui-off-canvas-backdrop"></div>

      </div>

      </div>

      </body>

      </html>

      2015-04-16 16:34

    • DCloud_UNI_FXY

      当内容较多时，div侧滑菜单。必须与scroll控件结合使用才能实现滚动效果

      2015-04-16 16:38

    • struggle轶事 (作者)

      <!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">  
      
<script src="js/mui.min.js"></script>

      </head>

      <body>

      <div class="mui-off-canvas-wrap mui-draggable">

      <div class="mui-inner-wrap">

      <header class="mui-bar mui-bar-nav">

      <a href="#offCanvas" class="mui-icon mui-icon-bars mui-pull-left"></a>

      <a class="mui-icon mui-icon-close mui-pull-right"></a>

      <h1 class="mui-title">Container with slide menu</h1>

      </header>

      <aside id="offCanvas" class="mui-off-canvas-left">

      <ul class="mui-table-view mui-table-view-chevron mui-table-view-inverted">

      <li class="mui-table-view-cell">

      <a class="mui-navigate-right">

      Item 1

      </a>

      </li>

      <li class="mui-table-view-cell">

      <a class="mui-navigate-right">

      Item 2

      </a>

      </li>

      <li class="mui-table-view-cell">

      <a class="mui-navigate-right">

      Item 3

      </a>

      </li>

      </ul>

      </aside>

      <div class="mui-content mui-scroll-wrapper">

      <div class="mui-scroll">

      <ul class="mui-table-view mui-table-view-chevron">

      <li id="offCanvas_switch" class="mui-table-view-cell">

      整体滑动

      <div class="mui-switch mui-active">

      <div class="mui-switch-handle"></div>

      </div>

      </li>

      </ul>

      <ul class="mui-table-view mui-table-view-chevron">

      <li class="mui-table-view-cell">

      <a class="mui-navigate-right">

      Item 1

      </a>

      </li>

      <li class="mui-table-view-cell">

      <a class="mui-navigate-right">

      Item 2

      </a>

      </li>

      <li class="mui-table-view-cell">

      <a class="mui-navigate-right">

      Item 3

      </a>

      </li>

      <li class="mui-table-view-cell">

      <a class="mui-navigate-right">

      Item 4

      </a>

      </li>

      <li class="mui-table-view-cell">

      <a class="mui-navigate-right">

      Item 5

      </a>

      </li>

      <li class="mui-table-view-cell">

      <a class="mui-navigate-right">

      Item 6

      </a>

      </li>

      <li class="mui-table-view-cell">

      <a class="mui-navigate-right">

      Item 7

      </a>

      </li>

      <li class="mui-table-view-cell">

      <a class="mui-navigate-right">

      Item 8

      </a>

      </li>

      <li class="mui-table-view-cell">

      <a class="mui-navigate-right">

      Item 9

      </a>

      </li>

      <li class="mui-table-view-cell">

      <a class="mui-navigate-right">

      Item 10

      </a>

      </li>

      <li class="mui-table-view-cell">

      <a class="mui-navigate-right">

      Item 11

      </a>

      </li>

      <li class="mui-table-view-cell">

      <a class="mui-navigate-right">

      Item 12

      </a>

      </li>

      <li class="mui-table-view-cell">

      <a class="mui-navigate-right">

      Item 13

      </a>

      </li>

      <li class="mui-table-view-cell">

      <a class="mui-navigate-right">

      Item 14

      </a>

      </li>

      <li class="mui-table-view-cell">

      <a class="mui-navigate-right">

      Item 15

      </a>

      </li>

      </ul>

      </div>

      </div>

      <!-- off-canvas backdrop -->

      <div class="mui-off-canvas-backdrop"></div>

      </div>

      </div>

      </body>

      </html>

      这样还是不行额

      2015-04-16 16:52

    • DCloud_UNI_FXY

      参考hello-mui里的侧滑菜单的代码，mui('.mui-scroll-wrapper').scroll();

      2015-04-16 16:56

    • 云中漫步

      回复 DCloud_UNI_FXY:你好，我在静态加载的页面中使用mui('.mui-scroll-wrapper').scroll(); 可以出滚动效果，但改为动态加载（上拉加载更多）方式，页面就无法滚动，请问是何原因？

      2015-05-15 11:49

    评论 取消
    为什么被折叠? 0 个回复被折叠

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

    退出全屏模式 全屏模式 回复
    友情链接
    优势智云 黑马程序员 程序员客栈 个推 锐亚教育 即速应用 DCloud新闻 InfoQ 蓝莺IM HeapDump性能社区 diygw可视化 艾普阳科技 申请友链

    DCloud 即数字天堂(北京)网络技术有限公司是W3C成员及HTML5中国产业联盟发起单位

    京ICP备12046007号-4 | 京公网安备：11010802035340号 | 国家信息安全等级保护三级，证书编号：11010813802-20001

    | | 违法违规信息举报