- 博客(63)
- 收藏
- 关注
RSS订阅
19原创 前端语义化标签及实例
常用的语义化标签的以下几种：header、nav、article、section、aside、footer、abbr、dfn、address、del、ins、pre、meter、progress
2024-03-06 18:22:38
425
原创 React中使用LazyBuilder实现页面懒加载方法二
通过懒加载，实现：在初始dom出现在视口内时，替换掉初始dom，渲染真实dom，并取消对该dom的监听，实现只需加载一次，首次加载多少个真实dom，取决于可视区域跟初始dom的高度
2024-01-26 11:53:10
613
原创 React中使用LazyBuilder实现页面懒加载方法一
通过懒加载，实现：只有出现在视口内的元素才渲染真实的dom，在视口以外的元素都渲染初始dom，首次加载多少个真实dom，取决于可视区域跟初始dom的高度
2024-01-25 11:10:50
561
原创 React中实现行等高的虚拟列表加载滚动
当一个页面中需要接受接口返回的全部数据进行页面渲染时间，如果数据量比较庞大，前端在渲染dom的过程中需要花费时间，造成页面经常出现卡顿现象。需求：通过虚拟加载，优化页面渲染速度。缺点：需要固定好每一行元素的高度
2024-01-23 18:35:33
726
原创 react中使用antd的tabs进行标签切换时，销毁dom
最近接的一个需求，需要将之前通过点击按钮触发跳转到的另外一个页面，通过跟点击按钮的页面融合，通过tab的形式进行切换。【由于业务方面的需求，两个页面的逻辑代码部分存在一致性（经多年长期沿用下来的代码）】
2023-12-12 16:59:44
1185
原创 encodeURIComponent对url参数进行编码
当我们拼接在url上的参数存在某些特殊字符时（&、%、#、?、/ 等），getHrefParam()并不能满足我们的需求，例如：url后面的参数是：?window.location.search方法获取的参数被“#”截断。解决方法：encodeURIComponent对参数进行一次编码即可。
2023-10-26 18:05:08
408
原创 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
362
原创 js的object对象实现扩展运算符的基本方法
我们知道，js的数组是可以使用展开运算符展开数据的，原因是Array具有Symbol.iterator迭代器接口，但是对象是没有改迭代器接口的，如果直接用[...]展开运算符展开对象是报错的。
2023-05-28 21:27:11
274
原创 js闭包的简单应用
闭包的概念：有权访问其他函数的内部变量的函数闭包是作用域运用的特殊场景。注：js中自由变量的查找是在函数定义的地方向上级作用域查找，不是在执行的地方。闭包的使用场景概况为两种，一种是函数作为参数被传递，一种是函数作为返回值被返回。
2023-05-25 11:56:23
107
原创 js深浅拷贝理解与实现
在实际开发应用中，前端接到接口返回的引用类型数据时，为更好的应用于不同的业务和功能，常常需要对数据进行深浅拷贝，避免在操作过程中数据相互影响导致出现问题。
2023-05-23 10:40:45
80
原创 网络图片加载失败
当页面中使用到网络图片，但图片有时候加载成功，有时候又加载失败时，可以将下面语句添加在html页面即可:<meta name="referrer" content="no-referrer" />
2022-04-28 23:24:35
479
原创 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
770
原创 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
1039
原创 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
699
原创 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
803
原创 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
1999
原创 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
1128
原创 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
923
原创 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
3012
原创 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
3921
原创 uniapp小程序中Date()函数的iOS兼容性
在开发uniapp的时候，开发工具对Date()函数是没有进行兼容处理的，这时候预览页面就会遇到安卓跟iOS时间显示出现兼容问题。解决方法：new Date(“2018-12-12 00:00:01”).getTime()获取时间戳的时候在iOS下面为NaN，我们需要将时间的'-'转化为'/'，new Date(dataTime.replace(/-/g,'/')).getTime()或者time = time.replace(/\-/g,"/");let start = new
2021-10-15 17:10:03
7082
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人