index.html 4.4 KB
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>产品页</title>
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
    <link rel="stylesheet" type="text/css" href="css/common.css">
    <link rel="stylesheet" type="text/css" href="css/index.css">
    <link rel="stylesheet" type="text/css" href="css/dropload.css">
    <script src="js/base.js"></script>
    <script src="js/jquery.min.js"></script>
</head>
<body>
<div class="container">
    <div class="home_container">
        <!--头部-->
        <div class="banner">
            <div class="banner_img">
                <img src="images/logo@2x.png" width="100%" height="100%">
            </div>
            <div class="banner_title">
                Emerson品牌承诺
            </div>
        </div>
        <!--列表-->
        <div class="mid_box">
            <!--列表-->
            <div class="mid_box_item first_item" onclick="btn_next()">
                总介样本
            </div>
            <div class="mid_box_items">
                <div class="mid_box_item" onclick="btn_next_2()">
                    总介样本
                </div>

            </div>


        </div>

    </div>
</div>
</body>
<script src="js/jquery.min.js"></script>
<script src="js/dropload.min.js"></script>
<script>
    function btn_next() {
        // alert(111)
        window.location.href = "cplb.html";
    }

    function btn_next_2() {
        window.location.href = "gift.html";
    }


    // JavaScript Document
    //上拉加载
    $(document).ready(function () {
        // 页数
        var page = 0;
        // 每页展示10个
        var size = 3;
        $('.content').dropload({
            scrollArea: window,
            domUp: {
                domClass: 'dropload-up',
                domRefresh: '<div class="dropload-refresh">↓下拉刷新</div>',
                domUpdate: '<div class="dropload-update">↑释放更新</div>',
                domLoad: '<div class="dropload-load"><span class="loading"></span>加载中...</div>'
            },
            domDown: {
                domClass: 'dropload-down',
                domRefresh: '<div class="dropload-refresh">↑上拉加载更多</div>',
                domLoad: '<div class="dropload-load"><span class="loading"></span>加载中...</div>',
                domNoData: '<div class="dropload-noData">暂无数据</div>'
            },
            loadDownFn: function (me) {
                page++;
                // 拼接HTML
                var result = '';
                var s = "";
                var show = "";
                var list_compressor = "";
                var list_answer = "";
                $.ajax({
                    type: 'GET',
                    url: 'http://ons.me/tools/dropload/json.php?page=' + page + '&size=' + size,
                    dataType: 'json',
                    success: function (data) {
                        console.log(data);
                        var arrLen = data.length;
                        if (arrLen > 0) {
                            for (var i = 0; i < arrLen; i++) {
                                result += '<div class="mid_box_item" onclick="btn_next_2()">\n' +
                                    '                    总介样本\n' +
                                    '                </div>'


                            }
                            // 如果没有数据
                        } else {
                            // 锁定
                            me.lock();
                            // 无数据
                            me.noData();
                        }
                        // 为了测试,延迟1秒加载
                        setTimeout(function () {
                            // 插入数据到页面,放到最后面
                            $('.mid_box_items').append(result);
                            // 每次数据插入,必须重置
                            me.resetload();
                        }, 500);
                    },
                    error: function (xhr, type) {
                        alert('Ajax error!');
                        // 即使加载出错,也得重置
                        me.resetload();
                    }
                });
            },
            threshold: 50
        });

    })
</script>
</html>