加了侧滑菜单的页面底部和顶部在中间content内容滑动的时候底部和顶部不能固定在一个位置，怎么改动？
<!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" />
<link href="css/myapp.css" rel="stylesheet" />
<script type="text/javascript" charset="utf-8">
mui.init();
//取消浏览器的所有事件，使得active的样式在手机上正常生效
document.addEventListener('touchstart', function() {
return false;
}, true);
// 禁止选择
document.oncontextmenu = function() {
return false;
};
// H5 plus事件处理
var at = 100; // 默认动画时间
function plusReady() {
// 隐藏滚动条
plus.webview.currentWebview().setStyle({
scrollIndicator: 'none'
});
// Android处理返回键
plus.key.addEventListener('backbutton', function() {
if (confirm('确认退出？')) {
plus.runtime.quit();
}
}, false);
compatibleAdjust();
}
if (window.plus) {
plusReady();
} else {
document.addEventListener('plusready', plusReady, false);
}
// DOMContentLoaded事件处理
var _domReady = false;
document.addEventListener('DOMContentLoaded', function() {
_domReady = true;
compatibleAdjust();
}, false);
// 兼容性样式调整
var _adjust = false;
function compatibleAdjust() {
if (_adjust || !window.plus || !_domReady) {
return;
}
_adjust = true;
// iOS平台使用div的滚动条
if ("iOS" == plus.os.name) {
at = 300;
document.getElementById('content').className = 'scontent';
}
// 预创建二级窗口
preateWebviews();
// 关闭启动界面
setTimeout(function() {
plus.navigator.closeSplashscreen();
}, 500);
}
// 处理点击事件
var _openw = null;
function clicked(id) {
if (_openw) {
return;
}
_openw = preate[id];
if (_openw) {
if (_openw.showded) {
_openw.show('auto', at);
} else {
_openw.show('slide-in-right', at);
_openw.showded = true;
}
_openw = null;
} else {
var wa = plus.nativeUI.showWaiting();
_openw = plus.webview.create(id, id, {
scrollIndicator: 'none',
scalable: false
}, {
preate: true
});
preate[id] = _openw;
_openw.addEventListener('loaded', function() { //叶面加载完成后才显示
setTimeout(function() { //延后显示避免低端机上闪屏
wa.close();
_openw.show('slide-in-right', at);
_openw.showded = true;
_openw = null;
}, 500);
}, false);
_openw.addEventListener('close', function() { //页面关闭后可再次打开
_openw = null;
preate[id] && (preate[id] = null); //兼容窗口的关闭
}, false);
}
}
// 预创建二级页面
var preate = {};
function preateWebviews() {
preateWebivew('plus/webview.html');
var plist = document.getElementById('plist').children;
// 由于启动是预创建过多Webview窗口会消耗较长的时间，所以这里限制仅创建5个
for (var i = 0; i < plist.length && i < 2; i++) {
var id = plist[i].id;
id && (id.length > 0) && preateWebivew(id);
}
}
function preateWebivew(id) {
if (!preate[id]) {
var w = plus.webview.create(id, id, {
scrollIndicator: 'none',
scalable: false
}, {
preate: true
});
preate[id] = w;
w.addEventListener('close', function() { //页面关闭后可再次打开
_openw = null;
preate[id] && (preate[id] = null); //兼容窗口的关闭
}, false);
}
}
// 清除预创建页面(仅)
function preateClear() {
for (var p in preate) {
var w = preate[p];
if (w && w.showded && !w.isVisible()) {
console.log('preateClear: ' + w.id);
w.close();
preate[p] = null;
}
}
}
</script>
</head>
<body>
<div class="mui-off-canvas-wrap mui-draggable">
<div class="mui-inner-wrap">
<header class="mui-bar mui-bar-nav">
<a class="mui-action-menu mui-icon mui-icon-bars mui-pull-left"></a>
<a class="mui-action-back mui-btn mui-btn-link 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" onclick="clicked('phone.html')">
<span class="mui-icon mui-icon-phone"></span>
<span class="mui-tab-label">电话</span>
</a>
<a class="mui-tab-item" onclick="clicked('liudu/liuindex.html')">
<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>
<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">
<div id="slider" class="mui-slider">
<div class="mui-slider-group mui-slider-loop">
<div class="mui-slider-item mui-slider-item-duplicate">
<a href="#">
<img src="http://dcloudio.github.io/mui/assets/img/yuantiao.jpg">
</a>
<p class="mui-slider-title">
静静看这世界
</p>
</div>
<div class="mui-slider-item">
<a href="#">
<img src="http://dcloudio.github.io/mui/assets/img/shuijiao.jpg">
</a>
<p class="mui-slider-title">
幸福就是可以一起睡觉
</p>
</div>
<div class="mui-slider-item">
<a href="#">
<img src="http://dcloudio.github.io/mui/assets/img/muwu.jpg">
</a>
<p class="mui-slider-title">
想要一间这样的木屋，静静的喝咖啡
</p>
</div>
<div class="mui-slider-item">
<a href="#">
<img src="http://dcloudio.github.io/mui/assets/img/cbd.jpg">
</a>
<p class="mui-slider-title">
Color of SIP CBD
</p>
</div>
<div class="mui-slider-item">
<a href="#">
<img src="http://dcloudio.github.io/mui/assets/img/yuantiao.jpg">
</a>
<p class="mui-slider-title">
静静看这世界
</p>
</div>
<div class="mui-slider-item mui-slider-item-duplicate">
<a href="#">
<img src="http://dcloudio.github.io/mui/assets/img/shuijiao.jpg">
</a>
<p class="mui-slider-title">
幸福就是可以一起睡觉
</p>
</div>
</div>
<div class="mui-slider-indicator mui-text-right">
<div class="mui-indicator mui-active"></div>
<div class="mui-indicator"></div>
<div class="mui-indicator"></div>
<div class="mui-indicator"></div>
</div>
</div>
<div class="mui-card">
<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="myphoto.html">
<span class="mui-icon mui-icon-image"></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="member/member.html">
<span class="mui-icon mui-icon-contact"></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="date/date.html">
<span class="mui-icon mui-icon-email"><span class="mui-badge">5</span></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-chatbubble"></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-location"></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-search"></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-phone"></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-gear"></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-info"></span>
<div class="mui-media-body">关于我们</div>
</a>
</li>
</ul>
</div> ml
</div>
</div>
</div>
<script>
var content = document.querySelector('.mui-content');
var toggle = document.getElementById('M_Toggle_Grid_Carded');
var card = document.querySelector('.mui-card');
var grid = document.querySelector('.mui-grid-view');
toggle.addEventListener('toggle', function(event) {
var isActive = event.detail.isActive;
if (isActive) {
card.appendChild(grid);
card.style.display = '';
} else {
content.appendChild(grid);
card.style.display = 'none';
}
});
</script>
<script>
mui.init({
swipeBack: false,
});
var offCanvas = mui('#offCanvas');
document.querySelector('.mui-icon-bars').addEventListener('tap', function() {
//offCanvas.offCanvas('toggle')//toggle or show;
offCanvas.offCanvas('show');
});
document.querySelector('.mui-action-back').addEventListener('tap', function() {
//offCanvas.offCanvas('toggle')//toggle or hide;
offCanvas.offCanvas('hide');
});
</script>
</body> </html>
thinkive
可拖动式左滑动或者右滑动菜单能不能在上下滑动的时候（数据很多时候)固定头部和底部啊，原生侧滑虽然可以实现，但是不能拖动啊
2014-10-22 17:58
小浩
我删除了这两个节点，侧滑菜单就不能用了
2014-10-24 14:09
小浩
@1552 你的搞好了吗？
2014-10-24 14:24
thinkive
回复 小浩:搞不定呢
2014-10-27 11:23
gangan
侧边导航的 不能滚动 怎会
2015-12-03 00:43