apicloud一个win与多个frame组的页面实现

使用插件 <script type="text/javascript" src="script/iscroll-probe.min.js"></script>
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" 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>