详细问题描述
右滑导航 与 列表组件同时使用时，会导致列表无法滚动.
尝试在同一个页面里，集成右滑导航，与列表同时使用。却发现列表的内容，无法滚动。
重现步骤
<!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>
<link href="../../css/mui.min.css" rel="stylesheet"/>
<link href="../../css/mui.indexedlist.css" rel="stylesheet"/>
<style>
html,
body {
height: 100%;
overflow: hidden;
}
.mui-bar {
-webkit-box-shadow: none;
box-shadow: none;
}
</style>
</head>
<body>
<div id="offCanvasWrapper" class="mui-off-canvas-wrap mui-draggable">
<!--菜单部分-->
<aside id="offCanvasSide" class="mui-off-canvas-right">
<div id="offCanvasSideScroll" class="mui-scroll-wrapper">
<div class="mui-scroll">
<div class="title">侧滑导航</div>
<div class="content">
这是可拖动式侧滑菜单示例，你可以在这里放置任何内容；关闭侧滑菜单有多种方式： 1.在手机屏幕任意位置向右拖动(drag)；2.点击本侧滑菜单页之外的任意位置; 3.点击如下红色按钮
<span class="android-only">；4.Android手机按back键；5.Android手机按menu键
</span>。
<p style="margin: 10px 15px;">
<button id="offCanvasHide" type="button" class="mui-btn mui-btn-danger mui-btn-block"
style="padding: 5px 20px;">关闭侧滑菜单
</button>
</p>
</div>
<div class="title" style="margin-bottom: 25px;">侧滑列表示例</div>
<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>
<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>
</ul>
</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 id="offCanvasBtn" href="#offCanvasSide"
class="mui-icon mui-action-menu mui-icon-bars mui-pull-right"></a>
<h1 class="mui-title">产品资料</h1>
</header>
<div id="offCanvasContentScroll" class="mui-content mui-scroll-wrapper">
<div class="mui-scroll">
<!-- 在这里使用列表，会导致列表的内容无法滚动，只能整个区域块拉动 -->
<div id='list' class="mui-indexed-list mui-content-padded">
<div class="mui-indexed-list-search mui-input-row mui-search">
<input id="search" type="search" class="mui-input-clear mui-indexed-list-search-input"
placeholder="搜索机场">
</div>
<div class="mui-indexed-list-bar">
<a>A</a>
<a>B</a>
<a>C</a>
<a>D</a>
<a>E</a>
<a>F</a>
<a>G</a>
<a>H</a>
<a>I</a>
<a>J</a>
<a>K</a>
<a>L</a>
<a>M</a>
<a>N</a>
<a>O</a>
<a>P</a>
<a>Q</a>
<a>R</a>
<a>S</a>
<a>T</a>
<a>U</a>
<a>V</a>
<a>W</a>
<a>X</a>
<a>Y</a>
<a>Z</a>
</div>
<div class="mui-indexed-list-alert"></div>
<div class="mui-indexed-list-inner">
<div class="mui-indexed-list-empty-alert">没有数据</div>
<ul class="mui-table-view mui-content-padded">
<li v-for="(res, index) in list" class="mui-table-view-cell mui-indexed-list-item">
<div class="mui-slider-right mui-disabled">
<a class="mui-btn mui-btn-green" :target="res.res_id">复制新增</a>
<a class="mui-btn mui-btn-green" :target="res.res_id">编辑</a>
<a class="mui-btn mui-btn-red" :target="res.res_id">删除</a>
</div>
<div class="mui-slider-handle">
{{ res.res_name }}
</div>
<!--
<a class="mui-navigate-right">
{{ res.res_name }}
</a>
-->
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="../../js/vue.js"></script>
<script src="../../js/mui.min.js"></script>
<script src="../../js/db.js"></script>
<script src="../../js/app.js"></script>
<script src="../../js/mui.indexedlist.js"></script>
<script src="../../js/Array.js"></script>
<script type="text/javascript" charset="utf-8">
(function ($, doc) {
var res_list = {
list: null,
};
var vu_sl = new Vue({
el: '#list',
data: res_list
});
$.init();
$.plusReady(function () {
var header = document.querySelector('header.mui-bar');
var list = document.getElementById('list');
//calc hieght
list.style.height = (document.body.offsetHeight - header.offsetHeight) + 'px';
//create
window.indexedList = new mui.IndexedList(list);
db.res.res.select().run_sql({
success: function (data) {
console.log(app.debug(data));
res_list.list = data;
},
error: function () {
alert('获取产品失败');
}
});
// 单条右滑按钮点击
$('#list').on('tap', '.mui-btn', function (event) {
var elem = this;
var server_id = this.target;
// var server_id = this.getAttribute('target');
console.log('产品id:' + server_id);
var text = this.innerText;
if (text == '编辑') {
/*
app.ui.win.fire('#.html', 'ref', {
server_id: server_id
});
*/
}
if (text == '删除') {
mui.confirm('确认删除该条记录？', '删除后不可恢复', btnArray, function (e) {
if (e.index == 1) {
/*
if (app.sys.server.del_server_info(server_id)) {
ref();
plus.nativeUI.toast("删除成功");
} else {
plus.nativeUI.toast("删除失败");
}
*/
}
});
}
});
});
mui.init({
swipeBack: false,
});
//侧滑容器父节点
var offCanvasWrapper = mui('#offCanvasWrapper');
//主界面容器
var offCanvasInner = offCanvasWrapper[0].querySelector('.mui-inner-wrap');
//菜单容器
var offCanvasSide = document.getElementById("offCanvasSide");
//Android暂不支持整体移动动画
if (!mui.os.android) {
document.getElementById("move-togger").classList.remove('mui-hidden');
var spans = document.querySelectorAll('.android-only');
for (var i = 0, len = spans.length; i < len; i++) {
spans[i].style.display = "none";
}
}
//移动效果是否为整体移动
var moveTogether = false;
//侧滑容器的class列表，增加.mui-slide-in即可实现菜单移动、主界面不动的效果；
var classList = offCanvasWrapper[0].classList;
//变换侧滑动画移动效果；
mui('.mui-input-group').on('change', 'input', function () {
if (this.checked) {
offCanvasSide.classList.remove('mui-transitioning');
offCanvasSide.setAttribute('style', '');
classList.remove('mui-slide-in');
classList.remove('mui-scalable');
switch (this.value) {
case 'main-move':
if (moveTogether) {
//仅主内容滑动时，侧滑菜单在off-canvas-wrap内，和主界面并列
offCanvasWrapper[0].insertBefore(offCanvasSide, offCanvasWrapper[0].firstElementChild);
moveTogether = false;
}
break;
case 'main-move-scalable':
if (moveTogether) {
//仅主内容滑动时，侧滑菜单在off-canvas-wrap内，和主界面并列
offCanvasWrapper[0].insertBefore(offCanvasSide, offCanvasWrapper[0].firstElementChild);
}
classList.add('mui-scalable');
break;
case 'menu-move':
classList.add('mui-slide-in');
break;
case 'all-move':
moveTogether = true;
//整体滑动时，侧滑菜单在inner-wrap内
offCanvasInner.insertBefore(offCanvasSide, offCanvasInner.firstElementChild);
break;
}
offCanvasWrapper.offCanvas().refresh();
}
});
document.getElementById('offCanvasHide').addEventListener('tap', function () {
offCanvasWrapper.offCanvas('close');
});
//主界面和侧滑菜单界面均支持区域滚动；
mui('#offCanvasSideScroll').scroll();
mui('#offCanvasContentScroll').scroll();
//实现ios平台的侧滑关闭页面；
if (mui.os.plus && mui.os.ios) {
offCanvasWrapper[0].addEventListener('shown', function (e) { //菜单显示完成事件
plus.webview.currentWebview().setStyle({
'popGesture': 'none'
});
});
offCanvasWrapper[0].addEventListener('hidden', function (e) { //菜单关闭完成事件
plus.webview.currentWebview().setStyle({
'popGesture': 'close'
});
});
}
}(mui, document));
</script>
</body>
</html>期望修复，或举例，hello mui中的首页，是通过加载另一个单独的menu实现的。
运行环境
[系统版本] windows 7
[浏览器版本] chrome
[IDE版本] hbuilder
[mui版本]
附件
[代码片段]
[安装包]
联系方式
[QQ]
[电话]
1 个回复
y***@163.com
我也遇到了 大哥你咋解决的？