<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link href="../css/mui.min.css" rel="stylesheet" />
<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>
<div class="mui-content" id="main">
</div>
</body>
<script id='template' type="text/template">
<div id="slider" class="mui-slider">
<div id="sliderSegmentedControl" class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
<div class="mui-scroll">
<% for(var i in record) {var item=record[i];%>
<a class="mui-control-item <% if(i==0) { %>mui-active<% } %>" data-wid="article-subpage_<%=item.id%>">
<%=item.value%>
</a>
<%}%>
</div>
</div>
</div>
</script>
<script src="../js/mui.min.js"></script>
<script src="../js/webviewGroup.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" src="../js/arttmpl.js"></script>
<script type="text/javascript">
mui.init();
mui.plusReady(function() {
template.config('escape', false);
loadSegmentedControlData();
}
);
function loadSegmentedControlData() {
mui.ajax(ARTICLE_TYPE_URL, {
data: {
ognz_id: OGNZ_ID
},
dataType: 'json', //服务器返回json格式数据
type: 'get', //HTTP请求类型
timeout: 10000, //超时时间设置为10秒；
success: function(data) {
if(data["desc"] != undefined) {
mui.alert(data["desc"]);
} else {
buildHtml(data);
}
}
});
}
var divEl = document.createElement("div");
function buildHtml(data) {
divEl.innerHTML = template('template', {
"record": data
});
document.getElementById("main").appendChild(divEl.firstElementChild);
console.log(document.getElementById("main").innerHTML);
//手动加上了slider还是不行
mui('.mui-slider').slider();
}
</script> </html>
动态创建mui-slider，在安卓机器上无法左右滚动，如果吧动态获得的html代码 直接放在main下面，运行是可以左右滑动的。不知道如何解决，我也在dom后 加上了slider了还是没用
1 个回复
2***@qq.com - 茫茫代码中的一粒沙
解决了么？兄弟？