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

使用插件 
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：

            

                

                    

                        
测试
                        
测试导
                        
测试导航
                        
测试
                        
测试导
                        
测试导航
                        
测试
                        
测试导
                        
测试导航
                        
测试
                        
测试导
                        
测试导航
                    
                    

                
                

            
        

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页面：