入戏
入戏
  • 发布:2016-06-15 21:47
  • 更新:2018-05-17 00:11
  • 阅读:1320

侧滑导航中的主内容无法上下滑动

分类:MUI

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title></title>
<script src="js/mui.min.js"></script>
<link href="css/mui.min.css" rel="stylesheet"/>
<script type="text/javascript" charset="UTF-8">
mui.init();
</script>
</head>
<body>
<!-- 主界面菜单同时移动 -->
<!-- 侧滑导航根容器 -->
<div class="mui-off-canvas-wrap mui-draggable">
<!-- 主页面容器 -->
<div class="mui-inner-wrap">
<!-- 菜单容器 -->
<aside class="mui-off-canvas-left" id="offCanvasSide">
<div class="mui-scroll-wrapper">
<div class="mui-scroll">
<!-- 菜单具体展示内容 -->

                </div>  
            </div>  
        </aside>  
        <!-- 主页面标题 -->  
        <header class="mui-bar mui-bar-nav">  
            <a class="mui-icon mui-action-menu mui-icon-bars mui-pull-left" href="#offCanvasSide"></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">  
                <!-- 主界面具体展示内容 -->  
                <p>1</p>  
                <p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p>  
             </div>  
        </div>  
   	 <div class="mui-off-canvas-backdrop"></div>  
    </div>  
</div>  

</body>
</html>

2016-06-15 21:47 负责人:无 分享
已邀请:
DCloud_UNI_CHB

DCloud_UNI_CHB

参考mui官网scroll(区域滚动)章节,确认执行了scroll的初始化工作。

mui('.mui-scroll-wrapper').scroll({  
    deceleration: 0.0005 //flick 减速系数,系数越大,滚动速度越慢,滚动距离越小,默认值0.0006  
});
l***@163.com

l***@163.com

加了scroll初始化,依然不能滑动,option如何设置,谢谢!

options = {
scrollY: true, //是否竖向滚动
scrollX: false, //是否横向滚动
startX: 0, //初始化时滚动至x
startY: 0, //初始化时滚动至y
indicators: true, //是否显示滚动条
deceleration:0.0006, //阻尼系数,系数越小滑动越灵敏
bounce: true //是否启用回弹
}

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