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

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

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

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

云服務器 GPU云服務器搜索功能java實現(xiàn) webrtc 移動端實現(xiàn) 搜索功能 python搜索功能

文章版權歸作者所有，未經(jīng)允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉載請注明本文地址：http://systransis.cn/yun/89608.html

HTML-CSS

摘要：但是，從字體上來說雪碧圖制作，使用以及相關，圖文。由于采用了編譯，所以能夠保證在瀏覽器不支持標準布局的情況下，回滾到舊版本的，保證移動設備中能呈現(xiàn)出一樣的布局效果。我不想陷入和的紛爭，但是有一件事是確定的極大的提升了移動端一勞永逸的搞定 flex 布局尋根溯源話布局一切都始于這樣一個問題：怎樣通過 CSS 簡單而優(yōu)雅的實現(xiàn)水平、垂直同時居中。記得剛開始學習 CSS 的時候，看到 ...

xiaokai 2019-08-01 18:21 評論0 收藏0
HTML-CSS

摘要：但是，從字體上來說雪碧圖制作，使用以及相關，圖文。由于采用了編譯，所以能夠保證在瀏覽器不支持標準布局的情況下，回滾到舊版本的，保證移動設備中能呈現(xiàn)出一樣的布局效果。我不想陷入和的紛爭，但是有一件事是確定的極大的提升了移動端一勞永逸的搞定 flex 布局尋根溯源話布局一切都始于這樣一個問題：怎樣通過 CSS 簡單而優(yōu)雅的實現(xiàn)水平、垂直同時居中。記得剛開始學習 CSS 的時候，看到 ...

CHENGKANG 2019-08-29 14:11 評論0 收藏0
JavaScript精編干貨

摘要：老姚淺談怎么學鑒于時不時，有同學私信問我老姚，下同怎么學前端的問題。擼碼聽歌，全局控制。淺析用 js 解析 xml 的方法由于項目上需要解析 xml，于是各種百度，然后自己總結了下各個主流瀏覽器解析 xml 的方法，只能是很淺顯的知道他的用法，但是還沒有深層次的研究。裝 X - 建立自己的斗圖網(wǎng)站庫之前加過一個斗圖群，看到很多經(jīng)典的表情，然后就收藏到了 QQ，迫于本屌絲開不起...

Fourierr 2019-08-21 18:46 評論0 收藏0
移動端布局與適配

摘要：實戰(zhàn)之微信錢包騰訊服務界面網(wǎng)格布局是讓開發(fā)人員設計一個網(wǎng)格并將內(nèi)容放在這些網(wǎng)格內(nèi)。對于移動端適配，不同的公司不同的團隊有不同的解決方案。柵格系統(tǒng)用于處理頁面多終端適配的問題。 grid實戰(zhàn)之微信錢包騰訊服務界面 CSS3網(wǎng)格布局是讓開發(fā)人員設計一個網(wǎng)格并將內(nèi)容放在這些網(wǎng)格內(nèi)。而不是使用浮動制作一個網(wǎng)格，實際上是你將一個元素聲明為一個網(wǎng)格容器，并把元素內(nèi)容置于網(wǎng)格中。移動端頁面適配—...

Clect 2019-08-29 14:08 評論0 收藏0
JavasScript重難點知識

摘要：忍者級別的函數(shù)操作對于什么是匿名函數(shù)，這里就不做過多介紹了。我們需要知道的是，對于而言，匿名函數(shù)是一個很重要且具有邏輯性的特性。通常，匿名函數(shù)的使用情況是創(chuàng)建一個供以后使用的函數(shù)。 JS 中的遞歸遞歸, 遞歸基礎, 斐波那契數(shù)列, 使用遞歸方式深拷貝, 自定義事件添加這一次，徹底弄懂 JavaScript 執(zhí)行機制本文的目的就是要保證你徹底弄懂javascript的執(zhí)行機制，如果...

forsigner 2019-08-21 18:36 評論0 收藏0