* {
                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>