10_商品列表滑动加载效果制作
滑动加载，配合ajax调用，因此要创建本地服务器。

• 项目效果制作说明：
  1)模拟后端的json，调用json数据来实现滑动加载效果；
  2)搭建localhost环境有几种方式：

• nodejs,建一个简单的localhost

• php搭建一个localhost

• 实现效果图展示：

商品列表滑动加载.gif

一、php本地环境的搭建，XAMPP

1.XAMPP下载：https://www.apachefriends.org/zh_cn/index.html

• 讲师所用XAMPP版本：1.8.3-3
• 我所用：xampp-win32-7.1.10

2.安装XAMPP

PHP学习之道：[3]XAMPP配置PHP开发环境

3.XAMPP域名、端口配置：(如启动无误，就不用配置了，使用默认的即可)

1. xampp文件夹中搜索 httpd.conf ,以配置端口
   可以记事本形式打开该文件，如果要监听多个端口可在httpd.conf文件中的
   Listen 80
   下面添加即可，例如Listen 8080
2. 域名配置：--exra>httpd-vhosts.conf
   修改 ##ServerName，配置了域名就可以以域名形式进行访问
   改一下host,改成本地地址：127.0.0.1

讲师：PHP Version 5.5.9
我：PHP Version 7.1.10
安装报错：

17:15:11  [mysql]   Problem detected!
17:15:11  [mysql]   Port 3306 in use by "G:\software\wamp\bin\mysql\mysql5.5.8\bin\mysqld.exe wampmysqld"!
17:15:11  [mysql]   MySQL WILL NOT start without the configured ports free!
17:15:11  [mysql]   You need to uninstall/disable/reconfigure the blocking application
17:15:11  [mysql]   or reconfigure MySQL and the Control Panel to listen on a different port

原因是我电脑已经安装了WarmServer，端口号发生冲突，我修改了warmserver的端口号。
还有个问题，如下：

XAMPP安装出现问题02.png

解决方法见：XAMPP - Error: MySQL shutdown unexpectedly

4.将项目放置服务器环境下：

xampp>htdocs
复制项目到htdocs文件夹下即可

5.打开项目：http://localhost/wxshop/static/

6.制作详解：

1)prolist.html
2)sass/common/basis.scss: .loaddiv{}
1）script/enterjs/mainconfig.js:

$(window).scroll(commonObj.scrollHandler);
$("#prolist").on("touchmove",commonObj.scrollHandler);

2)scrollHandler怎么写的呢？script/js/commonobj.js:

define(["jquery"],function(require){ //依赖jQuery
    return commonObj = {
        ajaxstatus:true,
        pagesize : 5, //拖动一下显示5条 
        winH: $(window).height(),
        loadCanvas:function(){
         var imglength = $("#prolist").find("canvas").length;
            if (imglength > 0) {
                $("#prolist").find("canvas").each(function () {
                    var imgSrc = $(this).data("src");
                    var imageObj = new Image();
                    imageObj.canvs = $(this)[0];
                    var cvs = imageObj.canvs.getContext('2d');
                    if (cvs) {
                        imageObj.onload = function () {
                            imageObj.canvs.width = this.width;
                            imageObj.canvs.height = this.height;
                            cvs.drawImage(this, 0, 0);
                            $(imageObj.canvs).css("background-image", "none");
                        }
                        imageObj.src = imgSrc;
                    }
                })
            }
        },

        // 调用json
        getData: function(pagenumber){
            $.ajax({
                type: "get",
                url: "/wxshop/static/script/test.json",
                data: {
                    page:commonObj.pagenumber,//第几页
                    row: commonObj.pagesize, //表示每页几个，根据前面的数据可以得出拖动一下显示5条
                },
                // 如果成功，返回刚才得到的json
                dataType: "json",
                success: function(result){
                    $(".loaddiv").hide();
                    if(result.length > 0){
                        commonObj.ajaxstatus=true;
                        commonObj.insertDiv(result);
                        commonObj.loadCanvas();
                    }else{
                       $("#pagenumlength").val("0"); 
                    }
                },
                beforeSend: function () {
                   $(".loaddiv").show(); 
                },
                error: function () {
                    $(".loaddiv").hide();
                }
            });
        },
        insertDiv: function (json) {
            // 实现效果：滑动一下加载5条
            var $mainDiv = $("#scrollAdd");
            var html = '';
            var showlength=5;
            if(json.length<5){
                showlength=json.length;
            }

            for (var i = 0; i < showlength; i++) {              
                html += '<li><a href="#">'+
                    '<div class="promotion-word">'+
                    '<span class="triangle triangle1"></span>'+'<span class="pro-word word01" data_url="productinfo.html">专属</span>'+'</div>'+
                    '<div class="promotion-img fl"><canvas data-src="images/product/product1.png" ></canvas></div>'+
                     '<div class="production-des fr">'+
                         '<p class="title">广联达变更算量</p>'+
                          '<p class="pro-intro">简介这里简介这里简介这里简介这里简介这里简介这里简介这里简介介这里简介</p>'+
                          '<p class="price">价格：<span class="green">￥5000</span></p>'+
                    '</div></a></li>';
            }
            $mainDiv.append(html);
        },
        scrollHandler: function () {
            var docH = $(document).height();//整个网页的高度
            var winH = $(window).height();//浏览器可视窗口的高度
            var scrollT = $(window).scrollTop();// 滚动条top 浏览器可视窗口顶端距离网页顶端的高度（垂直偏移）

            // 当网页滚动条拉到最低端时，
            // $(document).height() == $(window).height() + $(window).scrollTop()
            if(parseInt(winH)+parseInt(scrollT)+50>=parseInt(docH) && commonObj.ajaxstatus){
                //commonObj.ajaxstatus:加上它是为了防止多次调用
                if($("#pagenumlength").val()=="1"){
                   commonObj.ajaxstatus=false;
                   commonObj.currentpage++;
                    commonObj.getData(commonObj.currentpage)
                }else{
                    return
                }
            }
        }
    }
})

7.存在问题：

xampp不能成功加载canvas文件，？？？
但使用warmserver能够完美打开

相关文章：
1.jquery的height()和javascript的height总结，js获取屏幕高度