组件方式开发 Web App全站-4- 页面切换

最新推荐文章于 2019-12-17 20:27:02 发布

侠客岛的含笑

最新推荐文章于 2019-12-17 20:27:02 发布

阅读量766

点赞数

分类专栏：前端组件化入门文章标签： web app 图片 class dom

本文链接：https://blog.csdn.net/qq_33936481/article/details/69396877

版权

前端组件化入门专栏收录该内容

9 篇文章 1 订阅

订阅专栏

这里写图片描述
方法：
- 添加一个页 addPage
- 添加一个组件 addComponet
- 展现所有的页面 loader
图文组件类：H5ComponentBase
作用：输出一个DOM，内容可以是图片或者文字
事件：
- 当前页载入：onLoad
- 当前页移出：onLeave
图表组件类：H5Component？？？
作用：在H5ComponentBase的基础值上插入DOM结构或Canvas图形
事件：
- 当前页载入移出：onLoad,onLeave
- 图表组件本身的生长动画
这里写图片描述

开发准备
这里写图片描述
页面切换

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1">

    <title>fullPage</title>

    <style type="text/css">
        body{
            margin: 0;
            padding: 0;
        }
        .component{
            width: 50%;
            height: 50px;
            margin-bottom: 20px;
            background-color: #eee; 
            display: none;
        }
    </style>

    <script type="text/javascript" src="../js/lib/jquery.js"></script>
    <script type="text/javascript" src="../js/lib/jquery-ui.min.js"></script>
    <script type="text/javascript" src="../js/lib/jquery.fullPage.js"></script>

    <script type="text/javascript">

        $(function (){
            $('#h5').fullpage({

                'sectionsColor': ['#254875','#00ff00','#254587','#695684'],
                onLeave:function(index,nextIndex,direction){
                    // debugger
                    $('#h5').find('.page').eq(index).trigger('onLeave')
                },
                afterLoad:function(anchorLink,index){
                    // debugger
                     $('#h5').find('.page').eq(index-1).trigger('onLoad')
                }
            })

            $('.page').on('onLeave',function(){
                console.log($(this).attr('id'),'===>','onLeave');
                $(this).find('.component').trigger('onLeave');
            })
            $('.page').on('onLoad',function(){
                console.log($(this).attr('id'),'===>','onLoad');
                 $(this).find('.component').trigger('onLoad');
            });

            //组件切换 // 渐隐渐现
            $('.component').on('onLoad',function(){
                $(this).fadeIn();
                return false;
            })
            $('.component').on('onLeave',function(){
                $(this).fadeOut();
                 return false;
            }) 


        });

    </script>

    <body>
    <!-- 用于验证 fullpage.js 切换页面，以及内容组织结构可用，组件能够进行动画 -->

        <div id="h5">
            <div class="page section" id="page-1">
                <div class="component log">1</div>
                <div class="component slogan">1</div>
            </div>
            <div class="page section" id="page-2">
                <div class="component log">2</div>
                <div class="component desc">2</div>
            </div>
            <div class="page section" id="page-3">
                <div class="component bar">3</div>
                <div class="component desc">3</div>
            </div>
            <div class="page section" id="page-3">
            </div>
        </div>
    </body>

</html>

侠客岛的含笑

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
组件方式开发 Web App全站-4- 页面切换

方法： - 添加一个页 addPage - 添加一个组件 addComponet - 展现所有的页面 loader 图文组件类：H5ComponentBase 作用：输出一个DOM，内容可以是图片或者文字事件： - 当前页载入：onLoad - 当前页移出：onLeave 图表组件类：H5Component？？？作用：在H5ComponentBase的基础值上插入D
复制链接

扫一扫

专栏目录