商品列表页面的某些方法处理

来源：互联网发布：java多人聊天编辑：程序博客网时间：2024/06/05 08:31

说明：
商品列表在页面进入时只加载一次商品数据：

function LoadGoods() {    $.ajax({        url: '/AgentShopAPP/GoodsShow/Query?date='+new Date().getMilliseconds(),        type: 'post',        dataType: 'json',        async: false,        data:QueryFilter,        success: function (data) {            var BaseImage = data.BaseImage;            //全局变量            var newDt = data.DtSource.GoodsList;            //复制一个数组，然后进行价格降序排序             newSortDt = newDt;            var clone = newDt.slice(0);            newSortDt1 = clone.sort(function (a, b) {                if (a.AgentSkuModel.SalePrice > b.AgentSkuModel.SalePrice) {                    return 1;                }                if (a.AgentSkuModel.SalePrice < b.AgentSkuModel.SalePrice) {                    return -1;                }                return 0;            });        }    });

APP的页面中使用上拉加载列表，同时所有商品图片进行懒加载处理的效果，并且根据不同销量和价格进行数组排序（价格排序的数组在Load函数内已编写好）
因此在页面初始加载的function中应该如此编写：

$(function () { LoadGoods(); //销量预先加载    $.init();//初始化，避免上拉加载没有反应    //销量的商品加载    //页面底部上拉加载事件    // 加载flag    var loading = false;    // 最多可加载的条目    var maxItems = 1000;    // 每次加载添加多少条目    var itemsPerLoad = 4;    function addItems(number, lastIndex) {        // 生成新条目的HTML        var html = '';        var index = newSortDt.length - lastIndex;//剩余未加载的商品数量        if (number <= index) {            for (var j = 0; j < number; j++) {                var supModel = newSortDt[lastIndex + j].AgentSkuModel;                html += "<li><a  class=\"external\" href=\"/AgentShopAPP/NormolPromotionDetails/Index?GoodsID=" + newSortDt[lastIndex + j].GoodsID + "\"><img  class=\"lazy\" src=\"http://m.molahong.cn/images/lazyload.gif\" data-src=\"" + newSortDt[lastIndex + j].AgentSkuModel.GoodsUrl + "@197h_197w_2e\"></a><p><a class=\"external\" href=\"/AgentShopAPP/NormolPromotionDetails/Index?GoodsID=" + newSortDt[lastIndex + j].GoodsID + "\">" + newSortDt[lastIndex + j].FullGoodsName + "</a></p>"             + "<p><span class=\"u-colorR\">&yen" + supModel.SalePrice + "</span><label class=\"costPrice\">&yen" + supModel.MarketPrice + "</label></p></li>";            }        } else if (number > index) {            for (var j = 0; j < index; j++) {                var supModel = newSortDt[lastIndex + j].AgentSkuModel;                html += "<li><a  class=\"external\" href=\"/AgentShopAPP/NormolPromotionDetails/Index?GoodsID=" + newSortDt[lastIndex + j].GoodsID + "\"><img class=\"lazy\" src=\"http://m.molahong.cn/images/lazyload.gif\" data-src=\"" + newSortDt[lastIndex + j].AgentSkuModel.GoodsUrl + "@197h_197w_2e\"></a><p><a class=\"external\" href=\"/AgentShopAPP/NormolPromotionDetails/Index?GoodsID=" + newSortDt[lastIndex + j].GoodsID + "\">" + newSortDt[lastIndex + j].FullGoodsName + "</a></p>"             + "<p><span class=\"u-colorR\">&yen" + supModel.SalePrice + "</span><label class=\"costPrice\">&yen" + supModel.MarketPrice + "</label></p></li>";            }            $("#tab3").find('.infinite-scroll-preloader').html("木有啦！");        }        // 添加新条目        $("#tab3").find(".newSalesContent").append(html);    }    //预先加载6条    addItems(6, 0);    // 上次加载的序号    var lastIndex = 6;    // 注册'infinite'事件处理函数    $(".page").on("infinite", ".infinite-scroll-bottom", function () {        //判断当前显示的是那种        var $active = $(".buttons-tab").find(".active");        if ($active.hasClass("salesSort")) {            // 如果正在加载，则退出            if (loading) return;            // 设置flag            loading = true;            // 模拟1s的加载过程            setTimeout(function () {                // 重置加载flag                loading = false;                if (lastIndex >= maxItems) {                    // 加载完毕，则注销无限加载事件，以防不必要的加载                    $.detachInfiniteScroll($('.infinite-scroll'));                    // 删除加载提示符                    $('.infinite-scroll-preloader').remove();                    return;                }                // 销量添加新条目                addItems(itemsPerLoad, lastIndex);                // 更新最后加载的序号                lastIndex = $("#tab3").find('.newSalesContent li').length;                //容器发生改变,如果是js滚动，需要刷新滚动                $.refreshScroller();            }, 1000);        }     });    //价格预先加载    $.init();//初始化，避免上拉加载没有反应    //页面底部上拉加载事件    // 加载flag    var loading1 = false;    // 最多可加载的条目    var maxItems1 = 1000;    // 每次加载添加多少条目    var itemsPerLoad1 = 4;    //价格的加载函数    function addItems1(number, lastIndex1) {        // 生成新条目的HTML        var html = '';        var index = newSortDt1.length - lastIndex1;//剩余未加载的商品数量        if (number <= index) {            for (var j = 0; j < number; j++) {                var supModel = newSortDt1[lastIndex1 + j].AgentSkuModel;    html += "<li><a  class=\"external\" href=\"/AgentShopAPP/NormolPromotionDetails/Index?GoodsID=" + newSortDt1[lastIndex1 + j].GoodsID + "\"><img  src=\"" + newSortDt1[lastIndex1 + j].AgentSkuModel.GoodsUrl + "@197h_197w_2e\"></a><p><a class=\"external\" href=\"/AgentShopAPP/NormolPromotionDetails/Index?GoodsID=" + newSortDt1[lastIndex1 + j].GoodsID + "\">" + newSortDt1[lastIndex1 + j].FullGoodsName + "</a></p>"             + "<p><span class=\"u-colorR\">&yen" + supModel.SalePrice + "</span><label class=\"costPrice\">&yen" + supModel.MarketPrice + "</label></p></li>";            }        } else if (number > index) {            for (var j = 0; j < index; j++) {                var supModel = newSortDt1[lastIndex1 + j].AgentSkuModel;                html += "<li><a  class=\"external\" href=\"/AgentShopAPP/NormolPromotionDetails/Index?GoodsID=" + newSortDt1[lastIndex1 + j].GoodsID + "\"><img src=\"" + newSortDt1[lastIndex1 + j].AgentSkuModel.GoodsUrl + "@197h_197w_2e\"></a><p><a class=\"external\" href=\"/AgentShopAPP/NormolPromotionDetails/Index?GoodsID=" + newSortDt1[lastIndex1 + j].GoodsID + "\">" + newSortDt1[lastIndex1 + j].FullGoodsName + "</a></p>"             + "<p><span class=\"u-colorR\">&yen" + supModel.SalePrice + "</span><label class=\"costPrice\">&yen" + supModel.MarketPrice + "</label></p></li>";            }            $("#tab4").find('.infinite-scroll-preloader').html("莫有啦！");        }        // 添加新条目        $("#tab4").find(".newSalesContent").append(html);    }    //预先加载6条    addItems1(6, 0);    // 上次加载的序号    var lastIndex1 = 6;    //价格的加载函数    $(".page").on("infinite", ".infinite-scroll-bottom", function () {        //判断当前显示的是那种        var $active = $(".buttons-tab").find(".active");        if ($active.hasClass("priceSort")) {            // 如果正在加载，则退出            if (loading1) return;            // 设置flag            loading1 = true;            // 模拟1s的加载过程            setTimeout(function () {                // 重置加载flag                loading1 = false;                if (lastIndex1 >= maxItems1) {                    // 加载完毕，则注销无限加载事件，以防不必要的加载                    $.detachInfiniteScroll($('.infinite-scroll'));                    // 删除加载提示符                    $('.infinite-scroll-preloader').remove();                    return;                }                // 价格添加新条目                addItems1(itemsPerLoad1, lastIndex1);                // 更新最后加载的序号                lastIndex1 = $("#tab4").find('.newSalesContent li').length;                //容器发生改变,如果是js滚动，需要刷新滚动                $.refreshScroller();            }, 1000);        }    });}

为了使懒加载起效果，需在懒加载的JS里添加以下代码：

       //下拉加载时动态添加图片时懒加载效果实现      $(".page").on('infinite', '.infinite-scroll-bottom', function () {          var images = new Array(),          query = $q('img.lazy')            , processScroll = function () {                for (var i = 0; i < images.length; i++) {                    if (elementInViewport(images[i])) {                        loadImage(images[i], function () {                            images.splice(i, i);                        });                    }                };            };          // Array.prototype.slice.call is not callable under our lovely IE8          for (var i = 0; i < query.length; i++) {              images.push(query[i]);          };          processScroll();          addEventListener('touchstart', $q('img.lazy'));      });

另外根据输入的搜索内容区匹配商品数据：

   $(".u-btn-search").on("click", function () {        var val = $(".search-input").val();//获取输入文本内容        QueryFilter["KeyWord"] = val;//设置关键字        LoadGoods();//从新加载数据，数据变更为带有关键字的数据        //页面不刷新，情况页面商品列表内容        $(".newSalesContent").html("");        addItems(6, 0);//预加载6条匹配好的销量数据        addItems1(6, 0);//预加载6条匹配好的价格数据    });

匹配数据过多，要上拉加载内容，为使懒加载起效果，那么需要在源码里写上事件进行触发懒加载事件：

     $(".u-btn-search").on("click", function () {          var images = new Array(),         query = $q('img.lazy')           , processScroll = function () {               for (var i = 0; i < images.length; i++) {                   if (elementInViewport(images[i])) {                       loadImage(images[i], function () {                           images.splice(i, i);                       });                   }               };           };          // Array.prototype.slice.call is not callable under our lovely IE8          for (var i = 0; i < query.length; i++) {              images.push(query[i]);          };          processScroll();          addEventListener('touchstart', $q('img.lazy'));      });

效果如下：
这里写图片描述

0 0