# 功能一七天免登录思路，vue搜索历史记录功能，根据滚动值动态让背景颜色和搜索框跟着等比例变化，js实现楼梯效果左右联动，js实现楼梯效果左右联动左边选中的值一直在中间，喜欢收藏刷新喜欢的爱心还在

本文链接：https://blog.csdn.net/weixin_56815481/article/details/115799780

功能一七天免登录思路，vue搜索历史记录功能，根据滚动值动态让背景颜色和搜索框跟着等比例变化，js实现楼梯效果左右联动，js实现楼梯效果左右联动左边选中的值一直在中间，喜欢收藏刷新喜欢的爱心还在

功能一七天免登录

登录的时候获取当前的时间戳，加上未来七天的时间加登录的个人信息，存储到本地缓存里面然后下次登录获取本地缓存里面的数据和现在时间进行比较如果当前时间大于本地存储的时间就把本地缓存里面的值删除掉，如果现在的时间不大于就直接使用本地缓存里面的值进行设置

vue搜索历史记录功能

使用keepalive进行一个组件的保存因为在优信二手车里面如果有一个搜索记录后面就有三个空格，每添加一个就少一个空格，直到四个全部占满，进入下一行，渲染一个数组，先将我搜索的值存入这个数组然后判断因为它是四个判断他取余四等不等于0能不能被取余如果没有取余掉就向数组添加一个空字符串，然后在里面在进行判断看他添加一个后能不能被取余掉如果不能就在添加一个字符串，然后在进行判断如果还不能取余掉就在添加一个空字符串下次在触发函数添加数据的时候就是四个，判断因为他是四个了第一层就能取余掉了不会触发if，但是现在会有一个bug，在添加的时候，空格不会替换掉一直向后添加，这时候要使用filter过滤在添加搜索历史后面，if判断前面使用trim（）这个方法他的作用就是去除空的字符串，这样就可以了

根据滚动值动态让背景颜色和搜索框跟着等比例变化

获取他的滚动值，然后拿到她完全显示的值，进行一个除于滚动值除实化值得到的值是可以进行rgba使用的然后设置他的rgba值就可以根据滚动背景虚化了，搜索框也是使用这个值不过这个太过于小使用进行乘于100，向前进2位，然后设置搜索框的width就可以了

js实现楼梯效果左右联动

获取右边的offsettop高，在获取左边left的点击的标签，循环给她添加点击事件，排他思想做一个背景颜色之间的切换，使用scrollto，里面有两个参数top，left的值，拿右边子对应元素的offsettop高，设置top值，让她父盒子进行滚动，滚动到对应的top值，就可以实现左边控制右边了，右边控制左边，就是获取右边内容盒子的高累加，依次push到数组里面，循环累加值，然后进行判断，如果当前的滚动值大于等于上一个高度，小于等于下一个高度，就把当前的下标赋值给一个变量，用来控制左边的active，类名，但是他会有一个bug，就是下标赋值的不准，所以要在前面加个0，因为第一次比较的时候他跟0比较的时候就大于就直接赋值下标，而不加，比较因为他是获取offsettop刚刚开始就是0，到第二个时候才是第一个数据的高度，所以会造成赋值错误的问题，加个0就可以了然后就可以控制了，

js实现楼梯效果左右联动左边选中的值一直在中间

监听左边变换背景颜色的哪个标签的offsettop值，我们要知道让她居中就肯定类名切换到大于左边盒子父盒子的一半了（就是视口盒子）进行判断如果切换类名的哪个盒子的offsettop值已经大于视口盒子半了获取切换类名标签的offsettop值给他父盒子进行一个设置，使用scrollto，top值就是获取过来的offsettop值这样他就直接滚动到最上面去了，还是没有居中是不是，这时候在减去父盒子的一半相当于给她拉回来的来了，然后transfrom（tranlast（-50%，-50%））给他拉回来自身盒子一半就可以实现了