首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

基于 Vue 的两层吸坑总结

前言 近日,在做活动页的过程中遇到两层吸的需求,并且要兼容 IE9 及以上的浏览器。乍一看不就是个吸嘛,应该不难吧,事实证明还是了很多坑才出来。兼容性问题多到吐血,我太难了。...废话不多说,先看一下两层吸的最终实现效果,如下图所示。 ?...实现方式 本文主要通过 VueSticky 插件来实现实现步骤描述如下: 安装:npm install vue-sticky --save 引入: import VueSticky from...-- sticky wrapper, IMPORTANT --> CONTENT 看了 VueSticky 的源码后将该插件的实现原理简要概括如下:...首先判断该浏览器是否支持 position:sticky;,若支持就用 position:sticky; 来实现,若不支持就用 position:fixed; 的方式实现 所以大家不用担心兼容性问题

1.5K20
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    基于 Vue 的两层吸坑总结

    本文首发于政采云前端团队博客:基于 Vue 的两层吸坑总结 https://www.zoo.team/article/double-ceiling ?...前言 近日,在做活动页的过程中遇到两层吸的需求,并且要兼容 IE9 及以上的浏览器。乍一看不就是个吸嘛,应该不难吧,事实证明还是了很多坑才出来。兼容性问题多到吐血,我太难了。...废话不多说,先看一下两层吸的最终实现效果,如下图所示。 ?...实现方式 本文主要通过 VueSticky 插件来实现实现步骤描述如下: 安装:npm install vue-sticky --save 引入: import VueSticky from...首先判断该浏览器是否支持 position:sticky;,若支持就用 position:sticky; 来实现,若不支持就用 position:fixed; 的方式实现 所以大家不用担心兼容性问题

    76310

    AOP原理与自实现

    AOP是一种面向切面编程的技术,要实现AOP就不得不提到Proxy模式,具体代理模式的例子可以参考 设计模式整理 由于代理模式都必须有一个统一的接口,我们先来写一个接口 public interface...Greeting { void sayHello(String name); } 还有一个实现类,是实现了它的主要功能。...Jack after 这样我们就对这一个实现类进行了环绕,但如果这样的实现类非常多怎么办呢?这个时候我们就需要用到动态代理了。...其实这里面接入点的具体实现也是通过反射来处理的。而AOP的整个实现也是通过动态代理来实现的。...现在我们就来自己实现一套AOP.代码延续于 @Compenent,@Autowired,@PostConstruct自实现 package com.guanjian.annotion; import

    56420

    10位PHP大师的开发原则

    WEB开发世界里,PHP是最流行的语言之一,从PHP里,你能够很容易的找到你所需的脚本,遗憾的是,很少人会去用“最佳做法”去写一个PHP程序。...在合适的时候使用PHP – Rasmus Lerdorf 没有谁比PHP的创建者Rasmus Lerdorf明白PHP用在什么地方是更合理的,他于1995年发布了PHP这门语言,从那时起,PHP就像燎原之火...举个例子,WordPress.com把用户的数据分散存储到4096个数据库中,这些数据库可以分散大规模的数据访问,实现流量和压力分流。...他是墨尔本PHP开发和开源俱乐部的成员, 因此他对PHP有一定的了解,同时对PHP caching有一定的想法和经验。...不要使用PHP框架 – Rasmus Lerdorf 与Josh的观点恰恰相反,PHP的鼻祖Rasmus Lerdorf却认为最好不要使用PHP框架,为什么?因为不基于框架的PHP性能更好。

    89450

    PHP 面试过的坑(二)「建议收藏」

    (6)接口中的方法和实现它的类默认都是public类型的 2....Static类/方法 (1)可以不实例化类而直接访问 (2)静态属性不可以由对象通过->操作符来访问,用::方式调用 原文:http://www.php.cn/php-weizijiaocheng-372186...策略模式的三个角色: 1.抽象策略角色 2.具体策略角色 3.环境角色(对抽象策略角色的引用) 实现步骤: 1.定义抽象角色类(定义好各个实现的共同抽象方法) 2.定义具体策略类(具体实现父类的共同方法...那么为什么要使用PHP单例模式? PHP一个主要应用场合就是应用程序与数据库打交道的场景,在一个应用中会存在大量的数据库操作,针对数据库句柄连接数据库的行为,使用单例模式可以避免大量的new操作。...\ PHP中的数据库操作有MySQL,MySQLi,PDO三种,可以用适配器模式统一成一致,使不同的数据库操作,统一成一样的API。

    40720

    php关闭浏览器继续执行坑记录

    最近在项目中需要批量刷数据,但是由于项目的框架太老无法简单的使用命令行,而且项目比较急,所以想到之前的php关闭浏览器继续执行的路子,我记得php客户端断开继续执行需要配置nginx和fpm和php的配置...,当时既修改php又修改fpm,但是找不到当时记录的配置信息了,后来想到自己之前测试过一个方法可行,于是翻出来了,代码如下://设置客户端断开依然运行ignore_user_abort(true);//...request_terminate_timeout配置时间决定,request_terminate_timeout 适用于当max_execution_time由于某种原因无法终止脚本的时候,会把这个php-fpm...PHP_EOL;        file_put_contents($file, $text);        sleep(1);    }};//正式执行任务execute($func);以上代码已经在...这是一个坑记录,不要偷懒,不要盲目自信,耗时的任务都走cli,如果要用这种方式最好加上日志记录,并且记录进程id,如果异常可以干掉相关进程,只限于刷数据,正式环境业务功能这么写就是猪!

    53630

    自己实现一个RPC框架

    RPC框架称为远程调用框架,其实现的核心原理就是消费者端使用动态代理来代理一个接口的方法(基于JDK的动态代理,当然如果使用CGLib可以直接使用无接口类的方法),通过加入网络传输编程,传输调用接口方法名称...现在我们来依次实现这些概念。这里我们做最简单的实现,网络编程使用的是BIO,大家可以使用Reactor模式的Netty来改写性能更好的方式。...public interface HelloService { String sayHello(String content); } 接口实现类 public class HelloServiceImpl...String content) { return "hello," + content; } } 消费者端的动态代理,如果你是把提供者和消费者写在两个工程中,则提供者端需要上面的接口和实现类...socket.close(); } } ); } } 有关JDK动态代理的内容可以参考AOP原理与自实现

    39010
    领券