- 博客(64)
- 收藏
- 关注
原创 前端语义化标签及实例
常用的语义化标签的以下几种:header、nav、article、section、aside、footer、abbr、dfn、address、del、ins、pre、meter、progress
2024-03-06 18:22:38
476
原创 React中使用LazyBuilder实现页面懒加载方法二
通过懒加载,实现:在初始dom出现在视口内时,替换掉初始dom,渲染真实dom,并取消对该dom的监听,实现只需加载一次,首次加载多少个真实dom,取决于可视区域跟初始dom的高度
2024-01-26 11:53:10
630
原创 React中使用LazyBuilder实现页面懒加载方法一
通过懒加载,实现:只有出现在视口内的元素才渲染真实的dom,在视口以外的元素都渲染初始dom,首次加载多少个真实dom,取决于可视区域跟初始dom的高度
2024-01-25 11:10:50
577
原创 React中实现行等高的虚拟列表加载滚动
当一个页面中需要接受接口返回的全部数据进行页面渲染时间,如果数据量比较庞大,前端在渲染dom的过程中需要花费时间,造成页面经常出现卡顿现象。需求:通过虚拟加载,优化页面渲染速度。缺点:需要固定好每一行元素的高度
2024-01-23 18:35:33
755
原创 react中使用antd的tabs进行标签切换时,销毁dom
最近接的一个需求,需要将之前通过点击按钮触发跳转到的另外一个页面,通过跟点击按钮的页面融合,通过tab的形式进行切换。【由于业务方面的需求,两个页面的逻辑代码部分存在一致性(经多年长期沿用下来的代码)】
2023-12-12 16:59:44
1276
原创 encodeURIComponent对url参数进行编码
当我们拼接在url上的参数存在某些特殊字符时(&、%、#、?、/ 等),getHrefParam()并不能满足我们的需求,例如:url后面的参数是:?window.location.search方法获取的参数被“#”截断。解决方法:encodeURIComponent对参数进行一次编码即可。
2023-10-26 18:05:08
445
原创 react的table合并行时,出现border-bottom重复问题
的处理,但是由于合并的行恰好能合并到table的最后一行,但是本身不属于最后一个tr,所以不具有该属性,导致td本身的border-bottom跟table的boder-bottom双重渲染。定义一个方法,接收整个list跟当前行的index,通过index截取剩下的list,赋值给newArr数组,for循环newArr数组,判断接下来的元素是否还存在rowSpanNum有值的行信息,如果有,则保持当前td的borderBottom值,如果没有,则当前td的borderBottom为'none'
2023-10-26 11:50:25
374
原创 js的object对象实现扩展运算符的基本方法
我们知道,js的数组是可以使用展开运算符展开数据的,原因是Array具有Symbol.iterator迭代器接口,但是对象是没有改迭代器接口的,如果直接用[...]展开运算符展开对象是报错的。
2023-05-28 21:27:11
295
原创 js闭包的简单应用
闭包的概念:有权访问其他函数的内部变量的函数闭包是作用域运用的特殊场景。注:js中自由变量的查找是在函数定义的地方向上级作用域查找,不是在执行的地方。闭包的使用场景概况为两种,一种是函数作为参数被传递,一种是函数作为返回值被返回。
2023-05-25 11:56:23
109
原创 js深浅拷贝理解与实现
在实际开发应用中,前端接到接口返回的引用类型数据时,为更好的应用于不同的业务和功能,常常需要对数据进行深浅拷贝,避免在操作过程中数据相互影响导致出现问题。
2023-05-23 10:40:45
107
原创 网络图片加载失败
当页面中使用到网络图片,但图片有时候加载成功,有时候又加载失败时,可以将下面语句添加在html页面即可:<meta name="referrer" content="no-referrer" />
2022-04-28 23:24:35
497
原创 React中renderProps的使用
index.jsximport React ,{Component} from 'react'import './index.css'export default class A extends Component { render(){ return ( <div className='a'> <h2>我是A组件</h2> {/* render调用
2022-03-19 12:00:28
786
原创 React中使用Context进行多层级组件传值
文件结构index.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
2022-03-19 00:13:16
1056
原创 React.js兄弟组件的传值通信
在React中,完成兄弟组件之间的通信,要借助pubsub-js库在vs code中,借助yarn进行下载安装yarn add pubsub-js在组件中通过以下语句进行引用import PubSub from 'pubsub-js'订阅消息用法PubSub.subscribe('getData',(msg,stateObj)=>{ console.log('A组件订阅消息了') console.log(stateObj) this.s
2022-01-07 18:00:16
717
原创 React中的父子组件之间的传值通信
在父组件中,通过state的方式定义组件的参数进行初始化// 定义App组件的状态值 state = { msg: '我来自父组件', messageA: '', // 接受A组件信息 messageB: '', // 接受B组件信息 }通过import调用子组件// 组件引用import PageA from './components/pageA'import PageB from './components/pageB'在父传子的过程中,只需要在
2022-01-07 14:51:16
821
原创 js实现对象数组去重及数据叠加
HTML<template> <div> <div v-for="item in list"> id:{{item.id}} - count:{{item.count}} </div> <br /> <div>点击按钮去重,count叠加</div> <button @click="getData">去重</button> </div></te
2021-12-20 16:57:37
2006
原创 vue中router实现路由跳转和parmas传参
文件结构:student.vue:<template> <div> <h1>学生</h1> <p>{{msg}}</p> </div></template><script> export default { data () { return { msg: '
2021-11-16 14:33:41
1138
原创 vue中this.$set更新视图的使用
在vue的开发过程中,偶尔会遇到在想要更新数据的情况下,控制台中已经有更新数据打印,但是视图中没有更新的情况,比如在data中我们需要给data定义一个对象,在使用的过程中需要个对象添加属性:代码如下:<template> <view> {{list.name}} <input v-model="list.age" /> <button @click="btnAdd">点击添加属性</button> </view&g
2021-11-12 15:59:39
947
原创 git查看项目中个人代码量
找到项目文件,右击打开 Git Bash输入如下命令,"用户名"这里填写自己的git用户名,比如:"chen"git log --author="用户名" --pretty=tformat: --numstat | awk '{ add += $1; subs += $2; loc += $1 - $2 } END { printf "added lines: %s, removed lines: %s, total lines: %s\n", add, subs, loc }' -..
2021-11-08 17:09:16
3027
原创 uniapp中实现radio实心圆单选
在uniapp中,radio的单选样式的打勾样式,并且input组件不能使用type="radio"类型,这样并不能满足日常的radio需求需要实现实心圆的radio单选,只能根据原生样式进行设计,下面使用vue.js举例<view> <view><radio>1</radio></view> <view class="radio-content"> <view class="radio-cont..
2021-11-01 09:17:01
4028
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人