![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
常见功能效果实现
bug丸
写文章主要是想记录下自己的学习,帮助自己梳理知识,可以如果有错误的地方欢迎指出。如果觉得有收获,可以让我满足下我的的虚荣心,点个赞
展开
-
滚动滚轮使盒子横向滚动
observer 对 resizeObserver 自身的引用,因此需要它的时候,你要从回调函数的内部访问。例如,这可用于在达到特定的情况时,自动取消对观察者的监听。ResizeObserver 构造函数创建一个新的 ResizeObserver 对象,它可以用于监听元素内容盒或边框盒或者尺寸的大小。entries是一个数组,可以用于获取每个元素改变后的新尺寸。原创 2024-01-21 11:48:56 · 474 阅读 · 0 评论 -
滚动懒加载的实现
懒加载的方案,监听滚动scroll、交叉观察IntersectionObserver原创 2023-08-15 22:10:55 · 176 阅读 · 0 评论 -
长列表处理
有时接口返回数据量多,dom过多,渲染时间长;在浏览器渲染页面的时候,当DOM节点的数量越多,重绘的时候,对性能的影响也大;常见场景:列表,订单、评论等。原创 2023-05-07 21:38:53 · 420 阅读 · 1 评论 -
vue目录树的封装
vue树形组件的封装,只有一级的目录树,单选或多选的封装;每一级都可以选的目录树的封装,使用的是递归的思想;封装过程中遇到的一些问题及解决方案原创 2022-11-13 21:15:54 · 1088 阅读 · 0 评论 -
常见布局效果实现方案
两种常见布局效果的实现:盒子水平垂直居中;盒子左侧固定,右侧自适应原创 2022-08-10 22:00:01 · 150 阅读 · 0 评论 -
前端分页及搜索
前端分页及搜索过滤的简单实现一般分页和搜索过滤都是后端来完成,,但是有时临时加的需求,数据简单,后端改起来涉及到的地方比较多,比较麻烦就由前端来完成<template> <div> <a-input-search v-model="inputKey" placeholder="姓名搜索" style="width: 200px" @search="onSearch" /> &l原创 2022-04-19 22:24:43 · 1059 阅读 · 0 评论 -
点击按钮滚动到指定位置
点击后滚动等到指定位置方法1:锚点连接优点:简单易实现缺点:效果比较生硬,不能有动画效果代码实现:a标签的href属性对应需要跳到位置标签的的id利用a标签的href属性实现跳转,不需要添加点击事件<template> <div> <div class="navBox" style="position:fixed"> <a href="#title1">标题一</a> <a href="原创 2021-06-26 21:34:20 · 3043 阅读 · 1 评论 -
搜索高亮显示效果实现
搜索高亮显示目的:将所有的关键字keyword都高亮显示方法1:正则搭配replace const keyword = "我"; const str = "我要搞钱,我想暴富,你也和我一样吧"; const reg = new RegExp(keyword, "gi"); const result = str.replace( reg, `<span style="color:red">${keywo原创 2022-01-01 13:28:09 · 380 阅读 · 0 评论