apicloud一個win與多個frame組的頁面實現
阿新 • • 發佈:2019-01-27
使用外掛 <script type="text/javascript" src="script/iscroll-probe.min.js"></script>
css部分
css部分
win頁面 html:* { 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; }
<div id="wrapper" class="flex-wrap"> <div id="iscroll" class="flex-con"> <div class="con"> <ul> <li tapmode="hover" onclick="funActive( this );">測試</li> <li tapmode="hover" onclick="funActive( this );">測試導</li> <li tapmode="hover" onclick="funActive( this );">測試導航</li> <li tapmode="hover" onclick="funActive( this );">測試</li> <li tapmode="hover" onclick="funActive( this );">測試導</li> <li tapmode="hover" onclick="funActive( this );">測試導航</li> <li tapmode="hover" onclick="funActive( this );">測試</li> <li tapmode="hover" onclick="funActive( this );">測試導</li> <li tapmode="hover" onclick="funActive( this );">測試導航</li> <li tapmode="hover" onclick="funActive( this );">測試</li> <li tapmode="hover" onclick="funActive( this );">測試導</li> <li tapmode="hover" onclick="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>