我的采用静态方式编写的HTML滚动区域的代码可以实现滚动，但是如果使用动态加载数据生成的代码则不行，我把代码贴出来，大家帮我解决下。
<!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="http://ask.dcloud.net.cn/../../css/mui.min.css">
<link rel="stylesheet" href="http://ask.dcloud.net.cn/../../css/app.css">
<style type="text/css">
.progress-bar {
overflow: hidden;
border-radius: 50px;
overflow: hidden;
padding: 0;
height: 5px;
background: #C3DDDD;
position: relative;
}
.progress-bar .cover {
position: absolute;
left: 0;
height: 5px;
background: #D81214;
}
.ten {
position: absolute;
left: 5px;
top: 5px;
}
.ten img {
width: 30px;
height: 35px;
max-width: 30px;
max-height: 35px;
}
</style>
<style>
html,
body {
background-color: #efeff4;
}
.mui-bar~.mui-content .mui-fullscreen {
top: 44px;
height: auto;
}
.mui-pull-top-tips {
position: absolute;
top: -20px;
left: 50%;
margin-left: -25px;
width: 40px;
height: 40px;
border-radius: 100%;
z-index: 1;
}
.mui-bar~.mui-pull-top-tips {
top: 24px;
}
.mui-pull-top-wrapper {
width: 42px;
height: 42px;
display: block;
text-align: center;
background-color: #efeff4;
border: 1px solid #ddd;
border-radius: 25px;
background-clip: padding-box;
box-shadow: 0 4px 10px #bbb;
overflow: hidden;
}
.mui-pull-top-tips.mui-transitioning {
-webkit-transition-duration: 200ms;
transition-duration: 200ms;
}
.mui-pull-top-tips .mui-pull-loading {
/*-webkit-backface-visibility: hidden;
-webkit-transition-duration: 400ms;
transition-duration: 400ms;*/
margin: 0;
}
.mui-pull-top-wrapper .mui-icon,
.mui-pull-top-wrapper .mui-spinner {
margin-top: 7px;
}
.mui-pull-top-wrapper .mui-icon.mui-reverse {
/*-webkit-transform: rotate(180deg) translateZ(0);*/
}
.mui-pull-bottom-tips {
text-align: center;
background-color: #efeff4;
font-size: 15px;
line-height: 40px;
color: #777;
}
.mui-pull-top-canvas {
overflow: hidden;
background-color: #fafafa;
border-radius: 40px;
box-shadow: 0 4px 10px #bbb;
width: 40px;
height: 40px;
margin: 0 auto;
}
.mui-pull-top-canvas canvas {
width: 40px;
}
.mui-slider-indicator.mui-segmented-control {
background-color: #efeff4;
}
</style>
</head>
<body>
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">全部商品</h1>
</header>
<div class="mui-content">
<div id="slider" class="mui-slider mui-fullscreen">
<div id="sliderSegmentedControl" class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted mui-segmented-control-negative">
<div class="mui-scroll">
<a class="mui-control-item mui-active" href="#item-1" data-cid='1'>手机平板</a>
<a class="mui-control-item" href="#item-2" data-cid='2'>电脑办公</a>
<a class="mui-control-item" href="#item-3" data-cid='3'>数码影音</a>
<a class="mui-control-item" href="#item-4" data-cid='4'>女性时尚</a>
<a class="mui-control-item" href="#item-5" data-cid='5'>美食天地</a>
<a class="mui-control-item" href="#item-6" data-cid='6'>潮流新品</a>
<a class="mui-control-item" href="#item-7" data-cid='7'>其它商品</a>
</div>
</div>
<div class="mui-slider-group">
<div id="item-1" class="mui-slider-item mui-control-content mui-active">
<div class="mui-scroll-wrapper">
<div class="mui-scroll">
<ul class="mui-table-view" data-cid='1'></ul>
</div>
</div>
</div>
<div id="item-2" class="mui-slider-item mui-control-content">
<div class="mui-scroll-wrapper">
<div class="mui-scroll">
<ul class="mui-table-view" data-cid='2'></ul>
</div>
</div>
</div>
<div id="item-3" class="mui-slider-item mui-control-content">
<div class="mui-scroll-wrapper">
<div class="mui-scroll">
<ul class="mui-table-view" data-cid='3'></ul>
</div>
</div>
</div>
<div id="item-4" class="mui-slider-item mui-control-content">
<div class="mui-scroll-wrapper">
<div class="mui-scroll">
<ul class="mui-table-view" data-cid='4'></ul>
</div>
</div>
</div>
<div id="item-5" class="mui-slider-item mui-control-content">
<div class="mui-scroll-wrapper">
<div class="mui-scroll">
<ul class="mui-table-view" data-cid='5'></ul>
</div>
</div>
</div>
<div id="item-6" class="mui-slider-item mui-control-content">
<div class="mui-scroll-wrapper">
<div class="mui-scroll">
<ul class="mui-table-view" data-cid='6'></ul>
</div>
</div>
</div>
<div id="item-7" class="mui-slider-item mui-control-content">
<div class="mui-scroll-wrapper">
<div class="mui-scroll">
<ul class="mui-table-view" data-cid='7'></ul>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
<script src="../../js/mui.js"></script>
<script src="../../js/mui.pullToRefresh.js"></script>
<script src="../../js/mui.pullToRefresh.material.js"></script>
<script src="../../js/template.js"></script>
<script src="../../js/qs.core.js" type="text/javascript" charset="utf-8"></script>
<script>
mui.init();
(function($) {
var page = [];
var deceleration = mui.os.ios ? 0.003 : 0.0009; //阻尼系数
$.ready(function() {
//加载目录列表
qs.core.ajaxLoadData('getCategoryList', {
token: qs.app.storage.getToken(),
}, function(response) {
// console.log(JSON.stringify(response));
var code = response.code;
if (code == 4001) {
qs.app.toLoginForm();
}
if (code == 200) {
//显示数据
var data = response.data;
for (var i = 0; i < data.length; i ) {
page[i] = 1;
}
var tmpl = 'slider-template';
var html = template(tmpl, {
list: data
});
//TODO 以下语句会导致不能处理滑动，不知怎么处理
// document.getElementById("slider").innerHTML = html;
$('.mui-scroll-wrapper').scroll({
bounce: false,
indicators: true, //是否显示滚动条
deceleration: deceleration
});
// console.log(html);
//循环初始化所有下拉刷新，上拉加载。
$.each(document.querySelectorAll('.mui-slider-group .mui-scroll'), pullToRefresh);
}
}, function(xhr, type, errorThrown) {
console.log(type);
});
});
/**
* @description 处理刷新逻辑
* @param {Object} index
* @param {Object} pullRefreshEl
*/
var pullToRefresh = function(index, pullRefreshEl) {
$(pullRefreshEl).pullToRefresh({
down: {
callback: function() {
var self = this;
setTimeout(function() {
var ul = self.element.querySelector('.mui-table-view');
self.endPullDownToRefresh();
}, 1000);
}
},
up: {
auto: true, //如果设置了auto，则自动上拉一次
contentrefresh: '正在加载...',
callback: function() {
var self = this;
setTimeout(function() {
var ul = self.element.querySelector('.mui-table-view');
var cid = ul.getAttribute('data-cid');
// console.log(cid);
qs.core.ajaxLoadData('getProjectListByCategoryId', {
cid: cid,
token: qs.app.storage.getToken(),
page: page[index]
}, function(response) {
var code = response.code;
if (code == 4001) {
qs.app.toLoginForm();
}
if (code == 200) {
//显示数据
var data = response.data;
var tmpl = 'category-item-template';
var html = template(tmpl, {
list: data
});
// ul.innerHTML = html;
qs.core.appendChidrenToListFromHtmlFragment(ul, html);
page[index] ;
} else if (code == 4004) {
self.endPullUpToRefresh(true); //没有更多的记录了
}
console.log(JSON.stringify(response));
}, function(xhr, type, errorThrown) {
console.log(type);
//plus.nativeUI.toast(errorThrown);
});
self.endPullUpToRefresh();
}, 1000);
}
}
});
}
})(mui);
</script>
<script type="text/html" id="slider-template">
<div id="sliderSegmentedControl" class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted mui-segmented-control-negative">
<div class="mui-scroll">
{{each list as value i}} {{if (i==0)}}
<a class="mui-control-item mui-active" href="#item-{{value.id}}" data-cid='{{value.id}}'>{{value.category_name}}</a> {{else}}
<a class="mui-control-item" href="#item-{{value.id}}" data-cid='{{value.id}}'>{{value.category_name}}</a> {{/if}} {{/each}}
</div>
</div>
<div class="mui-slider-group">
{{each list as value i}} {{if (i==0)}}
<div id="item-{{value.id}}" class="mui-slider-item mui-control-content mui-active">
<div class="mui-scroll-wrapper">
<div class="mui-scroll">
<ul class="mui-table-view" data-cid='{{value.id}}'></ul>
</div>
</div>
</div>
{{else}}
<div id="item-{{value.id}}" class="mui-slider-item mui-control-content">
<div class="mui-scroll-wrapper">
<div class="mui-scroll">
<ul class="mui-table-view" data-cid='{{value.id}}'></ul>
</div>
</div>
</div>
{{/if}} {{/each}}
</div>
</script>
<script type="text/html" id="category-item-template">
{{each list as value i}}
<li class="mui-table-view-cell mui-media-large">
<img class="mui-media-object mui-pull-left" src="{{value.product_cover}}">
<div class="mui-media-body">
{{if value.is_ten}}
<div class="ten">
<img src="images/10.png">
</div>
{{/if}}
<p class="mui-ellipsis-2">{{value.product_name}}</p>
<p class="divider"></p>
<p>第{{value.current_issue}}期
<button class="mui-btn mui-btn-red mui-pull-right mui-icon fa fa-cart-plus"> 加入清单</button>
</p>
<p style="text-align: left;">总需:<span style="color: red;">{{value.need_times}}</span>人次</p>
<p class="progress-bar"><span class="cover" style="width:30%;"></span></p>
<p>
<span>已参与:{{value.join_times}}人次</span>
<span class="mui-pull-right">剩余:{{value.left_times}}人次</span>
</p>
</div>
</li>
{{/each}}
</script>
</html>
11 个回复
VV巷子 - 我就是我
数据加载后要重新初始化scroll
mui('.mui-scroll-wrapper').scroll();
青伢子 (作者)
我有初始化，但是还是不行的。
2***@qq.com
同样遇到这个问题，有没有人解释一下啊？
hylong
document.getElementById("slider").innerHTML = html;
这句话确实有问题，这样做直接把区域滚动的代码都覆盖掉了，所以无法滚动。你可以将id放在<div class="mui-scroll">上面试试
2***@qq.com
用了document.getElementById("slider").querySelector('.mui-scroll').innerHTML = html;还是不行啊
2016-06-07 16:38
2***@qq.com
用了document.getElementById("slider").querySelector('.mui-scroll').innerHTML = html;还是不行啊
BoredApe - 有问题就会有答案。
每个人代码都不一样,请上传能重现问题的测试工程
2***@qq.com
云中陈
你这个问题解决了吗？？
datena - 全栈信不信
解决了吗，怎么搞的
binladen
遇到同样的问题。
解决了吗？
Sseakom1
动态数据是用document.createElement创建li节点，加载完成后执行初始化，最后可能会错位之类的加上下面这段进行定位和高度之类的
mui.ready(function(){
var scrollWrap = document.getElementById('scroll');
scrollWrap.style.height = (document.body.offsetHeight - 94) + 'px';
scrollWrap.style.top = '44px';
});