首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    基于 Vue 的两层吸顶踩坑总结

    前言 近日,在做活动页的过程中遇到两层吸顶的需求,并且要兼容 IE9 及以上的浏览器。乍一看不就是个吸顶嘛,应该不难吧,事实证明还是踩了很多坑才出来。兼容性问题多到吐血,我太难了。...图片.gif 功能点:两层吸顶,因为 Tabs 区域比较长所以在滚动过程中点击一层 Tabs 会回弹至一层吸顶刚吸顶的位置,这个功能点和锚点有些类似。...主要原因:第一层吸顶还符合吸顶条件,第二层吸顶已经开始消失 解决方案:给第一层吸顶元素添加 minHeight 属性,其大小为第一层吸顶元素的高度与第二层吸顶元素的高度的和。...这里有一个需要注意的点在于:一开始第一层吸顶元素的高度并非两者之和,所以这里就需要监听滚动事件,在吸顶元素距离底部的距离为两者高度之和的位置处给第一层吸顶元素添加 minHeight 属性 以下代码块中...) { removeEventListener("scroll", this.handleScroll); }, 同时要在 destroy 回调中移除监听 在 mounted 回调中加入以下代码

    1.5K20

    基于 Vue 的两层吸顶踩坑总结

    本文首发于政采云前端团队博客:基于 Vue 的两层吸顶踩坑总结 https://www.zoo.team/article/double-ceiling ?...前言 近日,在做活动页的过程中遇到两层吸顶的需求,并且要兼容 IE9 及以上的浏览器。乍一看不就是个吸顶嘛,应该不难吧,事实证明还是踩了很多坑才出来。兼容性问题多到吐血,我太难了。...主要原因:第一层吸顶还符合吸顶条件,第二层吸顶已经开始消失 解决方案:给第一层吸顶元素添加 minHeight 属性,其大小为第一层吸顶元素的高度与第二层吸顶元素的高度的和。...这里有一个需要注意的点在于:一开始第一层吸顶元素的高度并非两者之和,所以这里就需要监听滚动事件,在吸顶元素距离底部的距离为两者高度之和的位置处给第一层吸顶元素添加 minHeight 属性 以下代码块中...) { removeEventListener("scroll", this.handleScroll); }, 同时要在 destroy 回调中移除监听 在 mounted 回调中加入以下代码

    76610

    ReviewBoard代码评审实践总结 顶

    代码评审 代码评审(CodeReview),顾名思义是对代码进行评审,是软件工程的活动之一。 通过代码评审可以保证代码质量,促进团队知识共享……好处多多。...其次,代码托管平台GitLab(号称是GitHub的开源实现)也可以用来进行代码评审(把代码fork过去,用pull request的方式实现代码评审)。...pre-commit-review是指代码提交到代码库前进行代码评审; post-commit-review是指代码提交到代码库后进行代码评审。...提交人将代码提交至版比库 当然,笔者始终认为代码评审的最好方式是提交前评审,这样能够很好的保证提交到版本库的代码都是经过评审的。...,在实施或推广之时,遇到如下问题: 代码提交人在评审请求通过之后还需要再提交代码至版本库,同时无法确保被评审的代码和提交的代码的一致性 没有实现在代码评审请求评审通过后自动提交代码

    2.5K20

    JS 吸顶导航,告别“回到顶部”

    本文主要内容 1、吸顶导航是什么 2、吸顶导航的实现方法 3、小结 1、吸顶条导航是什么 如图: 吸顶导航栏的初始位置一般是靠近在页面的顶部位置,但是又存在一定距离,通常这块区域放置最为醒目或者重要元素的地方...当页面向下滚动时超过了吸顶导航的初始位置时,需要把吸顶导航栏固定在窗口顶部,一般吸顶导航栏还可以替换成文章标题栏,搜索框、tab条等等,例如百度糯米,天猫,淘宝最为常用。...明白了吸顶导航条的基本效果,下面写个简单的demo吧。 2、吸顶导航的实现方法 一、样式结构搭建 考虑到触发吸顶功能,需要为导航条设置触发后的样式。 HTML5学堂是一个热爱H5的讲师组成的组织,致力于构建一个前端、HTML5的分享平台,能够给学生提供一些资料,也为广大前端爱好者提供一个分享平台,其中涉及到的基本知识,JS...底层知识,JS底层知识,面试真题、相关技术、未来发展等。

    7.7K70

    RocketMQ事务消息代码样例 顶

    第三步,写一个你要执行的方法,比如你的本项目的一次数据库执行,或者其他业务代码。我这里要执行的是保存个人信息。...personInfoService.savePersonalInfo(userid, workClass,workCity); 全代码如下。...第四步,在交互代码里面调用 比如某一个controller或者其他地方(。。。。。。。为你们自己的获取数据来源的代码) try { long userid = 。。。。。。。...取得消息后执行业务代码updateUserService.updateUserInfo(user); 一般来说,请严格测试该业务代码,因为rocketmq如果这段业务代码失败,消息是会重新发送给消费者,...重新执行这段代码直到成功的,以此到达事务的最终一致性,所以你的这段代码决不能本身就是有Bug的,当然我们一般会处理3次,并不让他不停的处理,如果还是失败则记录日志,我们需要查看日志来解决。

    59720

    Maven - 代码混淆Proguard踩坑记

    Pre Maven - 代码混淆proguard-maven-plugin vs 代码加密classfinal 概述 ProGuard是一个Java代码混淆工具,它可以让你的Java程序变得更小、更快,...因为Java代码很容易被反编译,所以有时候需要对代码进行混淆,以保护你的知识产权。 ProGuard主要做了三件事: 压缩代码 - 它会删除程序中没有用到的类、属性和方法,让程序变小。...优化代码 - 它会优化代码结构,让程序运行更快。 混淆代码 - 它会把类名、属性名和方法名改成难懂的名字,让代码变得很难看懂。...混淆后的代码虽然很难看懂,但还是可以被反编译的。...所以ProGuard只是增加了反编译的难度,并不能完全防止代码被反编译。 总之,ProGuard是一个很好用的Java代码混淆工具,可以保护你的代码,让你的程序变小变快。

    84200

    调试JS代码

    记录下近期对JS代码的调试过程 性能分析 启动程序之后,打开google浏览器对应页面,按F12或者Ctrl+Shift+I进入 开发者工具页面 目前主要使用的功能有: Performance....性能评估,比如我想看下页面刷新的性能瓶颈所在,先点击 按钮,然后进行页面操作,当页面刷新完成,再点击 按钮,则会生成性能报告,可以看到资源消耗,JS代码的执行逻辑等 Sources....性能报告页面的 部分,可以通过点击色块查看其所在的js代码文件,如 点击则会跳转到 功能栏,有了源文件就可以进行断点调试;这里注意部分js文件是压缩后的文件,建议手动修改程序替换成可读性更强的原始代码文件...查看程序的打印输出,比如我想知道某个函数的执行时间,可以在js代码中进行修改 当js代码执行之后,可以在console输出中看到foo的执行时间 Network....代码使用for循环进行操作,也就是线性复杂度,计算耗时随数据量的增大而线性增大 通过debug观察发现颜色数组会有不少重复的数值,而同样的输入会导致相同的输出,然后对整个数据的1M个点进行统计分析,发现重复率相当高

    19K10

    js代码规范

    前言 在js的代码开发中,我简单的总结出了以下规则,后面会陆续补充并且对规范进行分类。...js代码建议保存到后缀名.js的文件中 js代码不建议放在html中,原因有:不能被缓存,会增大网页文件的大小,可维护性不高,会影响页面的加载。...js吧任何表达式都当一条简单语句,会导致一些隐性的错误。如果自己没加分号,那么js解释器会自动添加分号,按照自己能读懂的断句。 9.2 复合语句 也称为语句块,被包在大括号内部。...比如对象 var obj={} ;var arr=[] eval eval是最容易混乱使用的js函数,他可以执行内部入参的js函数或者表达式,可以直接解析变量。不建议使用 。...尽量使用语法严格模式 消除代码之中的不友好;代码运行更快 ;保证运行的安全 ;为新版本的js做好铺垫。 22.

    8.9K30

    扫码

    添加站长 进交流群

    领取专属 10元无门槛券

    手把手带您无忧上云

    扫码加入开发者社群

    相关资讯

    热门标签

    活动推荐

      运营活动

      活动名称
      广告关闭
      领券