10_商品列表滑動加載效果制作
滑動加載，配合ajax調(diào)用吹缔，因此要創(chuàng)建本地服務(wù)器商佑。
項目效果制作說明：
1)模擬后端的json，調(diào)用json數(shù)據(jù)來實現(xiàn)滑動加載效果厢塘；
2)搭建localhost環(huán)境有幾種方式：nodejs,建一個簡單的localhost
php搭建一個localhost
實現(xiàn)效果圖展示：
商品列表滑動加載.gif
一茶没、php本地環(huán)境的搭建肌幽，XAMPP
1.XAMPP下載：https://www.apachefriends.org/zh_cn/index.html
- 講師所用XAMPP版本：1.8.3-3
- 我所用：xampp-win32-7.1.10
2.安裝XAMPP
PHP學(xué)習(xí)之道：[3]XAMPP配置PHP開發(fā)環(huán)境
3.XAMPP域名、端口配置：(如啟動無誤抓半，就不用配置了喂急，使用默認(rèn)的即可)
- xampp文件夾中搜索 httpd.conf ,以配置端口
可以記事本形式打開該文件，如果要監(jiān)聽多個端口可在httpd.conf文件中的
Listen 80
下面添加即可笛求，例如Listen 8080 - 域名配置：--exra>httpd-vhosts.conf
修改 ##ServerName廊移，配置了域名就可以以域名形式進(jìn)行訪問
改一下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
原因是我電腦已經(jīng)安裝了WarmServer，端口號發(fā)生沖突探入，我修改了warmserver的端口號狡孔。
還有個問題，如下：
XAMPP安裝出現(xiàn)問題02.png
解決方法見：XAMPP - Error: MySQL shutdown unexpectedly
4.將項目放置服務(wù)器環(huán)境下：
xampp>htdocs
復(fù)制項目到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;
}
})
}
},
// 調(diào)用json
getData: function(pagenumber){
$.ajax({
type: "get",
url: "/wxshop/static/script/test.json",
data: {
page:commonObj.pagenumber,//第幾頁
row: commonObj.pagesize, //表示每頁幾個步氏，根據(jù)前面的數(shù)據(jù)可以得出拖動一下顯示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) {
// 實現(xiàn)效果：滑動一下加載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">廣聯(lián)達(dá)變更算量</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();//整個網(wǎng)頁的高度
var winH = $(window).height();//瀏覽器可視窗口的高度
var scrollT = $(window).scrollTop();// 滾動條top 瀏覽器可視窗口頂端距離網(wǎng)頁頂端的高度（垂直偏移）
// 當(dāng)網(wǎng)頁滾動條拉到最低端時徒爹，
// $(document).height() == $(window).height() + $(window).scrollTop()
if(parseInt(winH)+parseInt(scrollT)+50>=parseInt(docH) && commonObj.ajaxstatus){
//commonObj.ajaxstatus:加上它是為了防止多次調(diào)用
if($("#pagenumlength").val()=="1"){
commonObj.ajaxstatus=false;
commonObj.currentpage++;
commonObj.getData(commonObj.currentpage)
}else{
return
}
}
}
}
})
7.存在問題：
xampp不能成功加載canvas文件荚醒，？隆嗅？界阁？
但使用warmserver能夠完美打開
相關(guān)文章：
1.jquery的height()和javascript的height總結(jié)，js獲取屏幕高度
