webapp 开发之iScroll 学习

浏览数：39 / 时间：2015年06月11日

demo.html

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>Document</title>
    <script src="lib/jquery.js"></script>
    <script src="lib/iScroll.js"></script>
    <script src="js/demo8.js"></script>
    <style>
        /******************reset****************************/
        body{font-family: ‘Microsoft Yahei‘;background: #eee;}
        *{margin:0;padding: 0;}
        h1,h2,h3,h4,h5,h6{font-size: 100%;font-weight: normal;font-style: normal;}
        ul li{list-style: none;}
        /*****************common*****************************/
        .mb20{margin-bottom: 20px;}
        .clearfix{*zoom:1;}
        .clearfix:before,
        .clearfix:after{display: table;line-height: 0;content: ‘‘;}
        .clearfix:after{clear: both;}

        /******************layout****************************/
        .header{position: absolute;top: 0;height: 30px;line-height: 1.5;text-align: center;width: 100%;background: brown;color: white;}
        .section{position: absolute;top: 30px;bottom: 30px;overflow: auto;width: 100%;}
        .footer{position: absolute;bottom: 0;height: 30px;line-height: 1.5;text-align: center;width: 100%;background: brown;color: white;}
        .app-wrapper{height: 100%;}
        

        /**
         * 滚动图片
         */
        .prod-scro-list{background: #fff;padding: 10px;}
        .prod-wrapper{width: 300px;background: pink;margin: 0 auto;}
        .prod-wrapper .prod-container{width: 1200px;}
        .prod-wrapper .prod-container ul {}
        .prod-wrapper .prod-container ul li{width: 280px;height: 100px;padding: 10px;float: left;}

        .scro-nav-bar {width: 100px;margin: 0 auto;}
        .scro-nav-bar ul {}
        .scro-nav-bar ul li{float: left;width: 23px;text-align: center;display: block;}
        .scro-nav-bar ul li.active{background: brown;color: white;}
        /**
         * 产品详情介绍
         */
        .prod-detail-intr{background: #fff;}
        .prod-detail-intr article{padding: 20px;}

        /**
         * 产品规格
         */
        .prod-format{background: #fff;padding: 10px;}
        .prod-format-wrapper{overflow: hidden;width: 300px;background: pink;margin: 0 auto;}
        .prod-format-wrapper .prod-format-list{overflow: hidden;width: 900px;}
        .prod-format-wrapper .prod-format-list ul{}
        .prod-format-wrapper .prod-format-list ul li{width: 280px;height: 100px;padding: 10px;float: left;}
        
        nav.prod-format-nav-bar{}
        nav.prod-format-nav-bar ul {width: 250px;margin: 0 auto;}
        nav.prod-format-nav-bar ul li {float: left;width: 80px;text-align: center;display: block;}
        nav.prod-format-nav-bar ul li.active{background: brown;color: white;}
    </style>
</head>
<body>
    <header class="header"><h1>Header</h1></header>
    <section class="section">
        <div id="app-wrapper" class="app-wrapper">
            <div class="app-container">
                <div class="prod-scro-list mb20">
                    <div id="prod-wrapper" class="prod-wrapper">
                        <div class="prod-container">
                            <ul class="clearfix">
                                <li>this is prod 1 pic</li>
                                <li>this is prod 2 pic</li>
                                <li>this is prod 3 pic</li>
                                <li>this is prod 4 pic</li>
                            </ul>
                        </div>
                    </div>
                    <nav class="scro-nav-bar">
                        <ul class="clearfix">
                            <li class="active">1</li>
                            <li>2</li>
                            <li>3</li>
                            <li>4</li>
                        </ul>
                    </nav>
                </div>
                <div class="prod-detail-intr mb20">
                    <article>
                        <h1>this is prod title</h1>
                        <p>this is introduction paragraph!</p>
                    </article>
                </div>
                <div class="prod-format mb20">
                    <nav class="prod-format-nav-bar">
                        <ul class="clearfix">
                            <li class="active">产品名称</li>
                            <li>产品参数</li>
                            <li>商品价值</li>
                        </ul>
                    </nav>
                    <div id="prod-format-wrapper" class="prod-format-wrapper">
                        <div class="prod-format-list">
                            <ul class="clearfix">
                                <li>this is format 1</li>
                                <li>this is format 2</li>
                                <li>this is format 3</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <footer class="footer"><p>Footer</p></footer>
</body>
</html>

demo6.js

;(function () {
    ‘use strict‘;

    var ProdDetailApp = function () {
        var sectScrol = null,
            prodScrol = null,
            prodFormScrol = null;

        this.run = function () {
            // console.log(‘running!‘);
            
            $(window).load(function () {
                sectScrol = new iScroll(‘app-wrapper‘);
                prodScrol = new iScroll(‘prod-wrapper‘, {
                    snap: true,
                    momentum: false,
                    hScrollbar: false,
                    onScrollEnd: function () {
                        document.querySelector(‘.scro-nav-bar ul li.active‘).className = ‘‘;
                        document.querySelector(‘.scro-nav-bar ul li:nth-child(‘+(this.currPageX+1)+‘)‘).className=‘active‘;
                    }
                });
                prodFormScrol = new iScroll(‘prod-format-wrapper‘, {
                    snap: true,
                    momentum: false,
                    hScrollbar: false,
                    onScrollEnd: function () {
                        document.querySelector(‘.prod-format-nav-bar ul li.active‘).className = ‘‘;
                        document.querySelector(‘.prod-format-nav-bar ul li:nth-child(‘+(this.currPageX+1)+‘)‘).className=‘active‘;
                    }
                });
            });

            $(document).delegate(‘.prod-format-nav-bar ul li‘, ‘click‘, navScrolAction);
            
            function navScrolAction (e) {
                var $this = $(e.target),
                    index = $this.index();

                prodFormScrol.scrollToPage(index, 1);
            }
        }
    }

    var prodDetailApp = new ProdDetailApp();
    prodDetailApp.run();
}());