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

最新推荐文章于 2024-06-13 17:34:53 发布

zhaokei

最新推荐文章于 2024-06-13 17:34:53 发布

阅读量4.6k

点赞数 4

分类专栏：移动端 Apicloud

本文链接：https://blog.youkuaiyun.com/zhaokei/article/details/93198512

版权

移动端同时被 2 个专栏收录

5 篇文章

订阅专栏

Apicloud

4 篇文章

订阅专栏

博客介绍了类似京东左右滑动切换页面的功能实现，包括左右滑动页面和点击顶部tab栏切换页面。阐述了页面组成，指出左右滑动页面tab栏不切换、点击tab栏页面不滑动的问题，并给出解决办法，最后提供了代码下载链接。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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

二、实现的效果如下：

在这里插入图片描述

三、页面组成：

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'
            }]
        }
    }

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

html

<body>
    <div class="aui-tab" id="tab">
        <div class="aui-tab-item aui-active">使用技巧</div>
        <div class="aui-tab-item">
            <div></div>政策解读</div>
        <div class="aui-tab-item">通知公告</div>
    </div>
</body>

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

<script type="text/javascript" src="../script/aui-tab.js"></script>
<script>
    apiready = function() {
        var tab = new auiTab({
            element: document.getElementById("tab"),
        }, function(ret) {
            
        });
    }
</script>

四、问题

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

五、问题解决办法

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

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

至此，就实现了滑动页面后，动态设置tab按钮栏到对应位置的效果。

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

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

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

<!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" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>xxx</title>
    <link rel="stylesheet" type="text/css" href="../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../css/aui.css" />
    <link rel="stylesheet" type="text/css" href="../css/customer.css" />
    <link rel="stylesheet" type="text/css" href="../css/style.css" />
    <style>
        .aui-tab-item {
            font-size: 0.8rem;
        }
    </style>
</head>

<body>
    <div class="aui-tab" id="tab">
        <div class="aui-tab-item aui-active">使用技巧</div>
        <div class="aui-tab-item">
            <div></div>政策解读</div>
        <div class="aui-tab-item">通知公告</div>
    </div>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/aui-tab.js"></script>
<script>
    apiready = function() {
        var tab = new auiTab({
            element: document.getElementById("tab"),
        }, function(ret) {
            // console.log(JSON.stringify(ret));
            // 点击tab，切换framegroup到对应的页面
            api.setFrameGroupIndex({
                name: 'frame1_find_group',
                index: ret.index - 1,
                scroll: true, //是否带动画效果
                reload: true
            });
        });
        
        // 2019-6-21 17:02:11 业务使用，本文章内容用不到此处。
        // 监听底部按钮切换
        api.addEventListener({
            name: 'indexChangeEvent'
        }, function(ret, err) {
            if (ret) {
                //  alert( JSON.stringify( ret ) );
                if (ret.value.index == 1) { //底部导航切换到“发现”
                    fnOpenFindFrameGroup();
                } else {
                    fnCloseFindFrameGroup();
                }
            } else {
                alert(JSON.stringify(err));
            }
        });

        // 左右滚动framegroup时，监听并执行回调
        api.addEventListener({
            name: 'frameGroupChangeEvent'
        }, function(ret, err) {
            if (ret) {
                //  alert( JSON.stringify( ret ) );
                // console.log("framegroup当前index:" + ret.value.id);
                tab.setActive(ret.value.id + 1);

            } else {
                alert(JSON.stringify(err));
            }
        });

    }

    // 打开页面组，实现左右滑动切换效果
    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'
            }]
        }, function(ret, err) {
            if (ret) {
                api.sendEvent({
                    name: 'frameGroupChangeEvent',
                    extra: {
                        id: ret.index
                    }
                });
            }
        });
    }

    // 2019-6-21 17:02:11 业务使用，本文章内容用不到此处。
    function fnCloseFindFrameGroup() {
        api.closeFrameGroup({
            name: 'frame1_find_group'
        });
    }
</script>

</html>

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