<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>推荐项目</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.css">
<script src="js/mui.min.js"></script>
<script src="js/app.js"></script>
<style>
html,
body {
background-color: #efeff4;
}
span.mui-icon {
font-size: 14px;
color: #007aff;
margin-left: -15px;
padding-right: 10px;
}
.mui-off-canvas-right {
color: #fff;
}
.title {
margin: 35px 15px 10px;
}
.title+.content {
margin: 10px 15px 35px;
color: #bbb;
text-indent: 1em;
font-size: 14px;
line-height: 24px;
}
.mui-table-view.mui-grid-view.home_man_cell .mui-table-view-cell {
padding: 10px 0 0 0;
border: 0;
}
.mui-table-view .mui-media-object {
height: 80px;
max-width: 100px;
}
.mui-media-body .mui-ellipsis {
height: 60px;
line-height: 30px;
}
</style>
<!--<script type="text/javascript">
(function($) {
$('#cont_ul').on('tap', '.mui-table-view-cell', function() {
alert(1);
});
})(mui);
function groomdetails_open() {
alert(1);
mui.openWindow({
url: 'home_groom_details.html',
id: 'groomdetails_open',
styles: {
top: '0', //新页面顶部位置
bottom: '0', //新页面顶部位置
},
show: {
autoShow: true, //页面loaded事件发生后自动显示，默认为true
aniShow: 'slide-in-right', //页面显示动画，默认为”slide-in-right“；
duration: '150' //页面动画持续时间，Android平台默认100毫秒，iOS平台默认200毫秒；
},
waiting: {
autoShow: true, //自动显示等待框，默认为true
title: '正在加载...', //等待对话框上显示的提示内容
}
})
}
</script>-->
</head>
<body>
<!--侧滑菜单容器-->
<div id="offCanvasWrapper" class="mui-off-canvas-wrap mui-draggable">
<!--菜单部分-->
<aside id="offCanvasSide" class="mui-off-canvas-right" style="width: 50%;">
<div id="offCanvasSideScroll" class="mui-scroll-wrapper" style="width: 100%;">
<div class="mui-scroll" style="float: right;">
<div class="title" style="margin-bottom: 25px;"></div>
<ul class="mui-table-view mui-table-view-chevron mui-table-view-inverted" style="width: 70%;float: right;">
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
游戏
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
网页
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
应用
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
金融
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
服务
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
制造
</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-back 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 class="mui-content">
<ul class="mui-table-view" id="cont_ul" style="margin-top: 0;">
<li class="mui-table-view-cell mui-media">
<a href="activity_details.html" target="_blank">
<img class="mui-media-object mui-pull-left" src="images/home_botm.png">
<div class="mui-media-body">
智能设备芯片制造
<p class='mui-ellipsis'>
<span>城市：重庆 渝北</span>
<span style="float: right;">行业：制造</span>
<br />
<span>融资金额：500万</span>
</p>
</div>
</a>
</li>
<li class="mui-table-view-cell mui-media">
<img class="mui-media-object mui-pull-left" src="images/home_botm.png">
<div class="mui-media-body">
智能设备芯片制造
<p class='mui-ellipsis'>
<span>城市：重庆 渝北</span>
<span style="float: right;">行业：制造</span>
<br />
<span>融资金额：500万</span>
</p>
</div>
</li>
<li class="mui-table-view-cell mui-media">
<a href="activity_details.html" target="_blank">
<img class="mui-media-object mui-pull-left" src="images/home_botm.png">
<div class="mui-media-body">
智能设备芯片制造
<p class='mui-ellipsis'>
<span>城市：重庆 渝北</span>
<span style="float: right;">行业：制造</span>
<br />
<span>融资金额：500万</span>
</p>
</div>
</a>
</li>
<li class="mui-table-view-cell mui-media">
<a href="activity_details.html" target="_blank">
<img class="mui-media-object mui-pull-left" src="images/home_botm.png">
<div class="mui-media-body">
智能设备芯片制造
<p class='mui-ellipsis'>
<span>城市：重庆 渝北</span>
<span style="float: right;">行业：制造</span>
<br />
<span>融资金额：500万</span>
</p>
</div>
</a>
</li>
<li class="mui-table-view-cell mui-media">
<a href="activity_details.html" target="_blank">
<img class="mui-media-object mui-pull-left" src="images/home_botm.png">
<div class="mui-media-body">
智能设备芯片制造
<p class='mui-ellipsis'>
<span>城市：重庆 渝北</span>
<span style="float: right;">行业：制造</span>
<br />
<span>融资金额：500万</span>
</p>
</div>
</a>
</li>
<li class="mui-table-view-cell mui-media">
<a href="activity_details.html" target="_blank">
<img class="mui-media-object mui-pull-left" src="images/home_botm.png">
<div class="mui-media-body">
智能设备芯片制造
<p class='mui-ellipsis'>
<span>城市：重庆 渝北</span>
<span style="float: right;">行业：制造</span>
<br />
<span>融资金额：500万</span>
</p>
</div>
</a>
</li>
<li class="mui-table-view-cell mui-media">
<a href="activity_details.html" target="_blank">
<img class="mui-media-object mui-pull-left" src="images/home_botm.png">
<div class="mui-media-body">
智能设备芯片制造
<p class='mui-ellipsis'>
<span>城市：重庆 渝北</span>
<span style="float: right;">行业：制造</span>
<br />
<span>融资金额：500万</span>
</p>
</div>
</a>
</li>
<li class="mui-table-view-cell mui-media">
<a href="activity_details.html" target="_blank">
<img class="mui-media-object mui-pull-left" src="images/home_botm.png">
<div class="mui-media-body">
智能设备芯片制造
<p class='mui-ellipsis'>
<span>城市：重庆 渝北</span>
<span style="float: right;">行业：制造</span>
<br />
<span>融资金额：500万</span>
</p>
</div>
</a>
</li>
<li class="mui-table-view-cell mui-media">
<a href="activity_details.html" target="_blank">
<img class="mui-media-object mui-pull-left" src="images/home_botm.png">
<div class="mui-media-body">
智能设备芯片制造
<p class='mui-ellipsis'>
<span>城市：重庆 渝北</span>
<span style="float: right;">行业：制造</span>
<br />
<span>融资金额：500万</span>
</p>
</div>
</a>
</li>
</ul>
</div>
</div>
</div>
<!-- off-canvas backdrop -->
<div class="mui-off-canvas-backdrop"></div>
</div>
</div>
</body>
<script type="text/javascript">
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) {
switch (this.value) {
case 'main-move':
classList.remove('mui-slide-in');
if (moveTogether) {
//仅主内容滑动时，侧滑菜单在off-canvas-wrap内，和主界面并列
offCanvasWrapper[0].insertBefore(offCanvasSide, offCanvasWrapper[0].firstElementChild);
moveTogether = false;
}
break;
case 'menu-move':
classList.add('mui-slide-in');
break;
case 'all-move':
if (classList.contains('mui-slide-in')) {
classList.remove('mui-slide-in');
}
moveTogether = true;
//整体滑动时，侧滑菜单在inner-wrap内
offCanvasInner.insertBefore(offCanvasSide, offCanvasInner.firstElementChild);
break;
}
offCanvasWrapper.offCanvas().refresh();
}
});
document.getElementById('offCanvasShow').addEventListener('tap', function() {
offCanvasWrapper.offCanvas('show');
});
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'
});
});
}
</script>
</html>
Yooye
- 发布：2015-03-30 11:58
- 更新：2017-12-13 22:54
- 阅读：8620
侧滑包裹mui-table-view后内容区无法上下滑动
分类：MUI
5 个回复
蓓岑2015
请问问题是怎么解决的？
x***@tops001.com
我用你的代码自己试了一下，侧滑栏你只有6项，内容高度都还没有超过可见高度，滚动条就没有，所以上下滑动是不行的，我自己添加了几个，代码没有问题，但是我用你代码，之中有几个ID不存在报错，这个在看看
艾尔光年
你是在逗我
2017-03-20 17:32
m***@163.com
请问一下 你这问题解决了吗，我也遇到了同样的问题
renmingxu
今天我也遇到了，但是只有一个页面有问题，另一个没有问题，发现没问题的那个mui-table-view是套在先面这几个div里的，没看懂为什么，不过能用了。。。。。
JBoss
(function($){
$(".mui-scroll-wrapper").scroll({
//bounce: false,//滚动条是否有弹力默认是true
//indicators: false, //是否显示滚动条,默认是true
});
})(mui);
以上方式可以解决。