使用插件 <script type="text/javascript" src="script/iscroll-probe.min.js"></script>
css部分
css部分
* {
margin: 0;
padding: 0;
}
#wrapper {
background-color: #7a0;
}
#iscroll {
overflow: hidden;
position: relative;
height: 48px;
}
.showdon {
width: 40px;
height: 40px;
box-shadow: 0 0 6px #000;
position: absolute;
right: -40px;
top: 5px;
border-radius: 50%;
}
.run-line {
height: 2px;
width: 48px;
position: absolute;
left: 0;
bottom: 2px;
background-color: white;
-webkit-transition: all .3s;
transition: all .3s;
}
.con {
white-space: nowrap;
line-height: 48px;
position: absolute
}
li {
display: inline-block;
padding: 0 10px;
color: white;
line-height: 48px;
}
win页面 html:
<div id="wrapper" class="flex-wrap">
<div id="iscroll" class="flex-con">
<div class="con">
<ul>
<li tapmode="hover" οnclick="funActive( this );">测试</li>
<li tapmode="hover" οnclick="funActive( this );">测试导</li>
<li tapmode="hover" οnclick="funActive( this );">测试导航</li>
<li tapmode="hover" οnclick="funActive( this );">测试</li>
<li tapmode="hover" οnclick="funActive( this );">测试导</li>
<li tapmode="hover" οnclick="funActive( this );">测试导航</li>
<li tapmode="hover" οnclick="funActive( this );">测试</li>
<li tapmode="hover" οnclick="funActive( this );">测试导</li>
<li tapmode="hover" οnclick="funActive( this );">测试导航</li>
<li tapmode="hover" οnclick="funActive( this );">测试</li>
<li tapmode="hover" οnclick="funActive( this );">测试导</li>
<li tapmode="hover" οnclick="funActive( this );">测试导航</li>
</ul>
<div class="run-line"></div>
</div>
<div class="showdon"></div>
</div>
</div>
win页面js:
注:如果 li 是 ajax 请求过来的,需要在请求的函数中调用 loaded(),否则 li 不能滚动
var frames = [], myScroll;
apiready = function() {
$api.fixStatusBar($api.byId('wrapper'));
loaded();
}
//如果在此处请求 html 中的 li 的值(loaded()函数要在此请求函数中调用,否则 li 不能滚动)
function getLiData() {
boktour._postAjax(
url,
{},
function(ret) {
//alert(JSON.stringify(ret.Data));
var addDatalistCardTpl = doT.template(document.getElementById('first-section').innerHTML);
document.getElementById("first-listData").insertAdjacentHTML('beforeEnd', addDatalistCardTpl(ret.Data));
loaded();
}
)
}
function loaded() {
myScroll = new IScroll('#iscroll', {
scrollX: true,
tap: true
});
var eLis = document.querySelectorAll('li');
for (var i = 0, li = eLis.length; i < li; i++) {
frames.push({
name: eLis[i].innerHTML,
url: './scroll_frm.html'
});
}
api.openFrameGroup({
name: 'gro',
background: '#fff',
rect: {
x: 0,
y: document.querySelector('#wrapper').offsetHeight,
w: api.winWidth,
h: api.winHeight - document.querySelector('#wrapper').offsetHeight
},
frames: frames
}, function(ret, err) {
if (ret) {
funActive(ret.index)
}
});
}
function funActive(ele) {
var eLis = document.querySelectorAll('li');
if (typeof ele == 'object') {
for (var i = 0, len = eLis.length; i < len; i++) {
if (eLis[i] == ele) {
ele = i;
}
}
api.setFrameGroupIndex({
name: 'gro',
index: ele,
scroll: false
});
}
var eRun = document.querySelector('.run-line');
eRun.style.cssText = 'left:' + eLis[ele].offsetLeft + 'px; width:' + eLis[ele].offsetWidth + 'px;'
myScroll.scrollToElement(eLis[ele], 300, true)
};
通过以上代码生成的frame页面组便可以根据数据库生成frame数量,以及实现左右滑动frame功能。新手可以再配合以下frame页面代码试试效果。
frame页面:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
body {
background-color: #fff;
text-align: center;
line-height: 100px;
font-size: 24px;
}
</style>
</head>
<body>
</body>
</html>
<script>
apiready = function() {
document.querySelector('body').innerHTML = api.frameName;
}
</script>