【工作技巧篇】移動端頂部搜索功能實(shí)現(xiàn)

Carl 發(fā)布于2019-08-21 17:31 / 3343人閱讀

摘要：最近公司產(chǎn)品需要在微信內(nèi)部做一個(gè)，其中有一個(gè)列表頁需要有頂部的搜索功能，類似京東那種，有搜索框和篩選條件。

最近公司產(chǎn)品需要在微信內(nèi)部做一個(gè)minisite，其中有一個(gè)列表頁需要有頂部的搜索功能，類似京東那種，有搜索框和篩選條件。產(chǎn)品需要的一個(gè)操作是，當(dāng)用戶下滑列表時(shí)，需要頂部的搜索只保留條件篩選，搜索框等需要隱藏；當(dāng)往上滑動或者滑動到列表底部（無新數(shù)據(jù)加載）時(shí)，需要將頂部的搜索功能再顯示完全。
上面是現(xiàn)實(shí)背景，下面直接列出基本的實(shí)現(xiàn)代碼以供大家參考：

var oldScrollTop = 0,
    filterFixed = 1,
    fscrollTimer = null,
    filterTop = 0;
  
function doScroll() {
    return function() {
        var st = $(window).scrollTop();
        filterFixedDeal(st);
    }
}

function resetSearchHeadwh() {
    /*重置頂部搜索功能的樣式*/
    $("#searchHead").height($("#searchHeadFixer").height());
    filterTop = $("#proFilterWrap").position().top;
}

/*判斷滑動的方向*/
function filterFixedDeal(st) {
    if (st > oldScrollTop) {
        isScrollBottom(st);
        if ((filterFixed === 1 || filterFixed === 2) && st > filterTop + 40) {
            filterFixed = 0;
            setFixedAnim();
        }
    } else if (st < oldScrollTop) {
        if (filterFixed === 0 || filterFixed === 2) {
            if (st <= filterTop - 44) {
                filterFixed = 1;
                setFixedAnim();
            } else if (filterFixed === 0) {
                filterFixed = 2;
                setFixedAnim();
            }
        }
    }
    oldScrollTop = st;
}

/*頂部搜索框等的顯隱切換，含基本動畫*/
function setFixedAnim() {
    fscrollTimer && window.clearTimeout(fscrollTimer);
    fscrollTimer = window.setTimeout(function() {
        var shf = $("#searchHeadFixer"),
            temp = 0;
        if (filterFixed == 0) {
            shf.addClass("search_head_fixer");
            temp = -4;
        } else if (filterFixed == 1) {
            shf.removeClass("search_head_fixer");
            resetSearchHeadwh();
        }
        shf.css({
            "-webkit-transform": "translate3d(0," + temp + "rem,0)",
            "transition": "transform 0.5s ease"
        });
    }, 100);
}

/*綁定頁面滾動事件*/
$(window).on("scroll", doScroll());