【工作技巧篇】移动端顶部搜索功能实现

Carl 发布于2019-08-21 17:31 / 3344人阅读

摘要：最近公司产品需要在微信内部做一个，其中有一个列表页需要有顶部的搜索功能，类似京东那种，有搜索框和筛选条件。

最近公司产品需要在微信内部做一个minisite，其中有一个列表页需要有顶部的搜索功能，类似京东那种，有搜索框和筛选条件。产品需要的一个操作是，当用户下滑列表时，需要顶部的搜索只保留条件筛选，搜索框等需要隐藏；当往上滑动或者滑动到列表底部（无新数据加载）时，需要将顶部的搜索功能再显示完全。

上面是现实背景，下面直接列出基本的实现代码以供大家参考：

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实现 webrtc 移动端实现搜索功能 python搜索功能

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/89608.html

HTML-CSS

摘要：但是，从字体上来说雪碧图制作，使用以及相关，图文。由于采用了编译，所以能够保证在浏览器不支持标准布局的情况下，回滚到旧版本的，保证移动设备中能呈现出一样的布局效果。我不想陷入和的纷争，但是有一件事是确定的极大的提升了移动端一劳永逸的搞定 flex 布局寻根溯源话布局一切都始于这样一个问题：怎样通过 CSS 简单而优雅的实现水平、垂直同时居中。记得刚开始学习 CSS 的时候，看到 ...

xiaokai 2019-08-01 18:21 评论0 收藏0
HTML-CSS

摘要：但是，从字体上来说雪碧图制作，使用以及相关，图文。由于采用了编译，所以能够保证在浏览器不支持标准布局的情况下，回滚到旧版本的，保证移动设备中能呈现出一样的布局效果。我不想陷入和的纷争，但是有一件事是确定的极大的提升了移动端一劳永逸的搞定 flex 布局寻根溯源话布局一切都始于这样一个问题：怎样通过 CSS 简单而优雅的实现水平、垂直同时居中。记得刚开始学习 CSS 的时候，看到 ...

CHENGKANG 2019-08-29 14:11 评论0 收藏0
JavaScript精编干货

摘要：老姚浅谈怎么学鉴于时不时，有同学私信问我老姚，下同怎么学前端的问题。撸码听歌，全局控制。浅析用 js 解析 xml 的方法由于项目上需要解析 xml，于是各种百度，然后自己总结了下各个主流浏览器解析 xml 的方法，只能是很浅显的知道他的用法，但是还没有深层次的研究。装 X - 建立自己的斗图网站库之前加过一个斗图群，看到很多经典的表情，然后就收藏到了 QQ，迫于本屌丝开不起...

Fourierr 2019-08-21 18:46 评论0 收藏0
移动端布局与适配

摘要：实战之微信钱包腾讯服务界面网格布局是让开发人员设计一个网格并将内容放在这些网格内。对于移动端适配，不同的公司不同的团队有不同的解决方案。栅格系统用于处理页面多终端适配的问题。 grid实战之微信钱包腾讯服务界面 CSS3网格布局是让开发人员设计一个网格并将内容放在这些网格内。而不是使用浮动制作一个网格，实际上是你将一个元素声明为一个网格容器，并把元素内容置于网格中。移动端页面适配—...

Clect 2019-08-29 14:08 评论0 收藏0
JavasScript重难点知识

摘要：忍者级别的函数操作对于什么是匿名函数，这里就不做过多介绍了。我们需要知道的是，对于而言，匿名函数是一个很重要且具有逻辑性的特性。通常，匿名函数的使用情况是创建一个供以后使用的函数。 JS 中的递归递归, 递归基础, 斐波那契数列, 使用递归方式深拷贝, 自定义事件添加这一次，彻底弄懂 JavaScript 执行机制本文的目的就是要保证你彻底弄懂javascript的执行机制，如果...

forsigner 2019-08-21 18:36 评论0 收藏0