reds-shop-scroll

@@ -14,6 +14,7 @@ const lazyLoad = require('yoho-jquery-lazyload');
 
 
 class ProductListWithFilter {
 class ProductListWithFilter {
     constructor(filterParams, searchUrl) {
     constructor(filterParams, searchUrl) {
+        this.scrollActived = true;
         this.filterParams = filterParams;
         this.filterParams = filterParams;
         this.searchUrl = location.protocol + '//m.yohobuy.com/' + (searchUrl || 'product/search/search');
         this.searchUrl = location.protocol + '//m.yohobuy.com/' + (searchUrl || 'product/search/search');
         this.filterUrl = location.protocol + '//m.yohobuy.com/product/search/filter';
         this.filterUrl = location.protocol + '//m.yohobuy.com/product/search/filter';
@@ -68,18 +69,20 @@ class ProductListWithFilter {
          * 滚动加载
          * 滚动加载
          */
          */
         $(window).scroll(() => {
         $(window).scroll(() => {
-            setTimeout(() => {
-                let afterScroll = document.body.scrollTop;
-
-                if (afterScroll - this.beforeScroll > 0) {
-                    window.requestAnimationFrame(() => {
-                        this.scrollHandler();
-                    });
-                    this.beforeScroll = afterScroll;
-                } else {
-                    return false;
-                }
-            }, 5);
+            if (this.scrollActived) {
+                setTimeout(() => {
+                    let afterScroll = document.body.scrollTop;
+
+                    if (afterScroll - this.beforeScroll > 0) {
+                        window.requestAnimationFrame(() => {
+                            this.scrollHandler();
+                        });
+                        this.beforeScroll = afterScroll;
+                    } else {
+                        return false;
+                    }
+                }, 5);
+            }
         });
         });
     }
     }
 
 

@@ -3,25 +3,38 @@ require('product/search/list.page.css');
 require('product/shop/redshop.page.css');
 require('product/shop/redshop.page.css');
 
 
 const $ = require('yoho-jquery');
 const $ = require('yoho-jquery');
-const allProduct = require('./shop/all-product');
+const shopId = $('#shopId').val();
+const ProductListWithFilter = require('product/product-list-with-filter');
 let Tab = require('../plugin/tab');
 let Tab = require('../plugin/tab');
 
 
 let $filterBox = $('.filter-box');
 let $filterBox = $('.filter-box');
 let $shopCategory = $('#shop-category');
 let $shopCategory = $('#shop-category');
 let $listNav = $('#list-nav'); // 筛选项列表
 let $listNav = $('#list-nav'); // 筛选项列表
 
 
+/**
+ * 初始化全部商品 TAB 页
+ */
+let productListWithFilter = new ProductListWithFilter({
+    shop_id: shopId
+});
+
+productListWithFilter.scrollActived = false;
+
 Tab.prototype.home = function() { // 隐藏筛选 TAB
 Tab.prototype.home = function() { // 隐藏筛选 TAB
     $filterBox.css('display', 'none');
     $filterBox.css('display', 'none');
+    productListWithFilter.scrollActived = false;
 };
 };
 Tab.prototype.getallgoods = function() { // 显示筛选 TAB
 Tab.prototype.getallgoods = function() { // 显示筛选 TAB
     $listNav.find('li').removeClass('active');
     $listNav.find('li').removeClass('active');
     $listNav.find('.default').addClass('active');
     $listNav.find('.default').addClass('active');
     $filterBox.css('display', 'block');
     $filterBox.css('display', 'block');
-    allProduct.getGoodsList({type: 'default', page: 1});
+    productListWithFilter.getGoodsList({type: 'default', page: 1});
+    productListWithFilter.scrollActived = true;
 };
 };
 Tab.prototype.getnewgoods = function() {
 Tab.prototype.getnewgoods = function() {
     $filterBox.css('display', 'none');
     $filterBox.css('display', 'none');
-    allProduct.getGoodsList({type: 'new', page: 1});
+    productListWithFilter.getGoodsList({type: 'new', page: 1});
+    productListWithFilter.scrollActived = true;
 };
 };
 
 
 /**
 /**
@@ -35,7 +48,7 @@ if ($shopCategory.length > 0) {
 
 
 
 
 // 页面打开直接加载筛选项
 // 页面打开直接加载筛选项
-allProduct.getFilter();
+productListWithFilter.getFilter();
 
 
 require('../plugin/sticky');
 require('../plugin/sticky');
 require('./shop/coupon');
 require('./shop/coupon');

-/*
- * @Author: Targaryen
- * @Date: 2017-03-24 13:43:55
- * @Last Modified by: Targaryen
- * @Last Modified time: 2017-06-20 09:50:01
- */
-
-/** *****************************
- * 红人店铺使用的全部商品页面碎片
- *******************************/
-
-const filter = require('../../plugin/filter');
-const lazyLoad = require('yoho-jquery-lazyload');
-
-let noResultHbs = require('product/search/no-result-new.hbs');
-
-let $goodsContainer = $('#goods-container');
-let $container = $goodsContainer.children('.default-goods'); // 承载商品列表的容器
-let $listNav = $('#list-nav'); // 筛选项列表
-let $pre = $listNav.find('.active'); // 记录进入筛选前的active项，初始为选中项
-let $allGoodsTabPage = $(document.getElementById('all-goods'));
-let $filterBody = $('.filter-body');
-let $dropList = $('.drop-list');
-
-const shopId = $('#shopId').val();
-
-let navInfo = {
-    price: {
-        order: 1,
-        end: false
-    },
-    discount: {
-        order: 1,
-        end: false
-    },
-    default: {
-        order: 0,
-        end: false,
-        type: 'default'
-    },
-    new: {
-        order: 0,
-        end: false
-    },
-    sale: {
-        order: 0,
-        end: false
-    },
-    popularity: {
-        order: 0,
-        end: false
-    }
-};
-
-let beforeScroll = document.body.scrollTop; // 滚动前位置记录
-let navType = 'default'; // 目前激活的导航页面
-let defaultOpt = Object.assign({}, navInfo.default, {shop_id: shopId}); // 默认参数
-let onSearching = false; // 是否正在搜索
-let isScrollLoad = false; // 是否是滚动加载
-let page = 1; // 页码
-let nav;
-let $firstText = $('.first-li-more').find('.nav-txt');
-let $thisLi = '';
-
-// 物料商品列表标记
-if ($('#material-flag').val() === 'material') {
-    let material = true;
-
-    if ($('.first-li-more').hasClass('active')) {
-        page = 2; // 已在服务端渲染第一页
-    }
-    Object.assign(defaultOpt, {
-        material: material,
-        unionType: window.queryString.union_type
-    });
-}
-
-/**
- * 处理筛选参数
- */
-const handleChoseFilter = function() {
-    $.each($filterBody.find('.chosed'), function(index, elem) {
-        let choseOpt = {};
-
-        choseOpt[$(elem).parent().data('type')] = $(elem).data('id');
-        Object.assign(defaultOpt, choseOpt);
-    });
-};
-
-/**
- * 获取商品列表
- */
-const getGoodsList = params => {
-    handleChoseFilter();
-
-    if (!onSearching) {
-        Object.assign(defaultOpt, {
-            page: page++
-        });
-    }
-
-    // 有参数，参数优先，滚动加载相关参数重置
-    if (params && !params.filtering) {
-        Object.assign(defaultOpt, params);
-        if (params.page) {
-            page = params.page + 1;
-        }
-        isScrollLoad = false;
-        beforeScroll = document.body.scrollTop;
-    }
-
-    if (nav && nav.end) {
-        return false;
-    }
-
-    if (!onSearching) {
-        onSearching = true;
-
-        $.ajax({
-            type: 'GET',
-            url: location.protocol + '//m.yohobuy.com/product/search/search',
-            data: defaultOpt,
-            xhrFields: {
-                withCredentials: true
-            },
-            beforeSend: function() {
-                if ($('.no-result-new').length > 0) {
-                    $('.no-result-new').remove();
-                }
-                $container.append('<div class="search-divide">正在加载...</div>');
-            },
-            success: function(result) {
-                // 去掉正在加载
-                $('.search-divide').remove();
-
-                let noResult = !result || result.length < 1 || (result.list && result.list.length < 1);
-
-
-                // 没有结果输出没有结果页面
-                if (noResult) {
-                    if (isScrollLoad) {
-                        $container.append('<div class="search-divide">没有更多内容了...</div>');
-                    } else {
-                        $container.html(noResultHbs());
-                    }
-
-                    if (nav) {
-                        nav.end = true;
-                    }
-
-                    onSearching = false;
-                    return false;
-                }
-
-                if (isScrollLoad) {
-                    $container.append(result);
-                } else {
-                    $container.html(result);
-                }
-
-                lazyLoad($container.find('img[class=lazy]').not('img[src]'));
-
-                onSearching = false;
-            },
-            error: function() {
-                let $divide = $('.search-divide');
-
-                $divide.text('加载失败，点击重试');
-                $divide.one('click', function() {
-                    $divide.text('正在加载...');
-                    getGoodsList();
-                });
-                onSearching = false;
-            }
-        });
-    }
-};
-
-/**
- * 加载筛选数据
- */
-const getFilter = function() {
-    $.ajax({
-        type: 'GET',
-        url: location.protocol + '//m.yohobuy.com/product/search/filter',
-        data: defaultOpt,
-        success: function(data) {
-            if (!data) {
-                return false;
-            }
-
-            $goodsContainer.append(data);
-
-            // 初始化filter&注册filter回调
-            filter.initFilter({
-                fCbFn: getGoodsList,
-                hCbFn: function() {
-
-                    // 切换active状态到$pre上
-                    $pre.addClass('active');
-                    $pre.siblings('.filter').removeClass('active');
-                }
-            });
-
-            $filterBody = $('.filter-body');
-        }
-    });
-};
-
-$listNav.bind('contextmenu', function() {
-    return false;
-});
-
-const popularityFilter = function(thisLi, type) {
-    if (thisLi.hasClass('active')) {
-        $dropList.hide();
-        return false;
-    }
-    $thisLi.addClass('active').siblings('li').removeClass('active');
-
-    defaultOpt.type = type;
-
-    nav = navInfo[type];
-
-    if (thisLi.hasClass('asc')) {
-        nav.order = 1;
-    } else {
-        nav.order = 0;
-    }
-
-    Object.assign(defaultOpt, nav);
-    getGoodsList();
-    $dropList.hide();
-};
-
-$listNav.on('touchend touchcancel', function(e) {
-    page = 1;
-    beforeScroll = $(window).scrollTop();
-    isScrollLoad = false;
-
-    let $this = $(e.target).closest('li'); // 被点击的 Tab
-    let $active;
-
-    // 默认列表增加人气筛选
-    if ($this.hasClass('first-li-more') && $this.hasClass('active')) {
-        $this.siblings('.active').removeClass('active');
-        $this.addClass('active');
-        $dropList.toggle();
-        $dropList.find('.default').on('touchend touchcancel', function() {
-            $thisLi = $(this);
-            $firstText.html('默认');
-            popularityFilter($thisLi, 'default');
-            return false;
-        });
-        $dropList.find('.discount').on('touchend touchcancel', function() {
-            $thisLi = $(this);
-            $firstText.html($(this).data('text'));
-            popularityFilter($thisLi, 'discount');
-            $('.first-li-more').removeClass('new default sale discount').addClass('discount');
-            return false;
-        });
-    } else if ($this.hasClass('filter')) { // 筛选面板
-        $dropList.css('display', 'none');
-
-        // 筛选面板切换状态
-        if ($this.hasClass('active')) {
-            filter.hideFilter();
-
-            // 点击筛选前的 active 项恢复 active
-            $pre.addClass('active');
-            $this.removeClass('active');
-        } else {
-            $pre = $this.siblings('.active');
-
-            $pre.removeClass('active');
-            $this.addClass('active');
-
-            filter.showFilter();
-        }
-    } else { // 排序改变
-        $dropList.css('display', 'none');
-        if ($this.hasClass('new')) {
-            navType = 'new';
-        } else if ($this.hasClass('price')) {
-            navType = 'price';
-        } else if ($this.hasClass('discount')) {
-            navType = 'discount';
-        } else if ($this.hasClass('default')) {
-            navType = 'default';
-        } else if ($this.hasClass('sale')) {
-            navType = 'sale';
-        } else if ($this.hasClass('popularity')) {
-            navType = 'popularity';
-        }
-
-        // 更新当前排序：默认、最新、价格、折扣
-        nav = navInfo[navType];
-
-        if ($this.hasClass('active')) {
-
-            // 默认、最新无排序切换
-            if ($this.hasClass('default') || $this.hasClass('new') || $this.hasClass('popularity')) {
-                return false;
-            }
-
-            if ($this.hasClass('price') || $this.hasClass('discount')) {
-
-                // 价格或折扣切换排序状态
-                $this.find('.icon > .iconfont').toggleClass('cur');
-                $pre = $this; // 更新 pre 为当前项
-                nav.order = nav.order === 0 ? 1 : 0; // 切换排序
-            }
-        } else {
-            $active = $this.siblings('.active');
-
-            $pre = $this; // $pre为除筛选导航的其他导航项，若当前active的为筛选，则把$pre置为当前点击项
-
-            if ($active.hasClass('filter')) {
-
-                // 若之前active项为筛选，则隐藏筛选面板
-                filter.hideFilter();
-            }
-
-            $active.removeClass('active');
-            $this.addClass('active');
-        }
-
-         /* 排序条件更新 */
-        defaultOpt.type = navType;
-        Object.assign(defaultOpt, nav);
-
-        getGoodsList();
-    }
-});
-
-
-/**
- * 当scroll到1/2$goodsContainer高度后继续请求下一页数据
- */
-const scrollHandler = function() {
-    if ($allGoodsTabPage.hasClass('active') && $(window).scrollTop() > $goodsContainer.height() * 0.6) {
-        isScrollLoad = true;
-        getGoodsList();
-    }
-};
-
-/**
- * 滚动加载
- */
-$(window).scroll(function() {
-    setTimeout(function() {
-        let afterScroll = document.body.scrollTop;
-
-        if (afterScroll - beforeScroll > 0) {
-            window.requestAnimationFrame(scrollHandler);
-            beforeScroll = afterScroll;
-        } else {
-            return false;
-        }
-    }, 5);
-});
-
-module.exports = {
-    getGoodsList,
-    getFilter
-};