apicloud+aui 类似京东左右滑动切换页面，顶部tab栏跟随切换

一、类似京东，左右滑动切换页面，实现以下功能：

1. 左右滑动页面直接切换，顶部tab栏也切换到对应位置。
2. 点击顶部tab栏按钮，切换按钮并切换页面。
   

二、实现的效果如下：

三、页面组成：

1. api.openFrameGroup() ，该方法可以将要左右切换的区域拆分为多个页面（下图红色区域），实现左右滑动页面的效果。
   

    // 打开页面组，实现左右滑动切换效果
    function fnOpenFindFrameGroup() {
        // 计算其实的y坐标
        var tabHeight = $api.offset($api.dom('#tab')).h; //tab切换栏高度
        var indexHtmlHeaderHeight = $api.getStorage('indexHtmlHeaderHeight'); //顶部标题栏高度
        var y = parseInt(tabHeight)+parseInt(indexHtmlHeaderHeight);
        api.openFrameGroup({
            name: 'frame1_find_group',
            scrollEnabled: true,
            rect: {
                x: 0,
                y: y,
                w: 'auto',
                h: api.frameHeight-parseInt(tabHeight)
            },
            index: 0,
            frames: [{
                name: 'frame1_1skill',
                url: 'frame1_1skill.html',
                bgColor: '#fff'
            }, {
                name: 'frame1_2policy',
                url: 'frame1_2policy.html',
                bgColor: '#fff'
            }, {
                name: 'frame1_3notice',
                url: 'frame1_3notice.html',
                bgColor: '#fff'
            }]
        }
    }

2. AUI里提供了按钮组工具栏，实现tab栏切换的效果。（下图红色区域）
   

html

    

        
使用技巧
        

            
政策解读
        
通知公告
    

要引用其aui-tab.js后，点击才有切换的效果。初始化方法里，也要通过var tab = new auiTab()来声明该tab组件。可参考官方aui的demo来拷贝代码。

四、问题

问题①：左右滑动页面，tab栏并不随着切换。
问题②：点击tab栏切换，页面并不跟着左右滑动，都需要手动去切换

五、问题解决办法

问题①：左右滑动页面，tab栏并不随着切换。

1. api.openFrameGroup()里有写明，可以在返回里获取当前所在frame的index
   
2. 获取该index，通过api.sendEvent() 发送《页面滑动》的事件，并携带index参数
3. 通过api.addEventListener() 监听《页面滑动》事件，获取index参数，并通过aui-tab.js里封装的tab.setActive()来设置tab栏哪一个按钮是高亮。
   aui-tab.js代码如下。官方无文档介绍该方法，需要自己看代码
   
   至此，就实现了滑动页面后，动态设置tab按钮栏到对应位置的效果。

问题②：点击tab栏切换，页面并不跟着左右滑动

1. 这个的相对简单，tab栏切换后，回调函数里可获取index，可直接通过api.setFrameGroupIndex()来设置framegroup切换到哪个页面，切scroll参数设置成true效果更好看。
   

至此，问题都解决了。整个页码代码奉上。

    
    
    
    
    
    
    
    
    



    

        
使用技巧
        

            
政策解读
        
通知公告
    

代码可到 https://community.apicloud.com/bbs/forum.php?mod=viewthread&tid=137023&page=1&typestatus=1 下载