- 博客(33)
- 收藏
- 关注
RSS订阅原创 如何控制Echarts时间轴的刻度区间
我们可以通过Echarts中的xAxis.minInterval和xAxis.interval设置一个固定的时间间隔。废话不多说，看效果图，我的是24小时的间隔。例如：1小时的时间间隔。
2023-03-15 15:14:27
2915
1
原创 js数组排序sort方法以及sort方法对原数组的影响解决方案
上面这个方法只是使用到了浅拷贝，list和dataList指向的还是同一个存储地址，所以这样子的操作会影响到原始数据。只需要把原始数据使用concat将原始数据拼接一下就产生了一个参拷贝，将新的数组指向了一个新的存储地址。使用sort对数组对象进行排序方法。我们可以使用深拷贝来解决这个问题。
2023-03-15 11:14:21
555
原创 如何获取本地UTC时间戳
let d = new Date();let date = Date.UTC(d.getUTCFullYear(),d.getUTCMonth() ,d.getUTCDate(),d.getUTCHours(),d.getUTCMinutes(),d.getUTCSeconds());let time = Math.floor(date) / 1000console.log(time)utc时间戳与本地时间的相互转换https://tool.lu/timestamp/...
2022-03-02 16:04:32
787
原创 React中Hooks方法总结
通俗一点的解释1、useState向组件内部提供一个state，一个可以更新他的函数，可以事件直接执行，并且新的state和旧的state不会合并，类似于this.setState点击完成之后就加12、useEffect接收两个参数，第一个参数为回调函数，第二个参数为一个数组，可以是空的数组，(dependencies，第二个参数的名字)，执行时机，如果第二个参数为空的数组那么只会在页面加载完成之后执行一次，如果第二个参数里面有值，当数组里面的值发生改变的时候会再次执行回调函数代码里面c
2022-02-25 16:57:55
817
原创 本地时间和UTC时间
北京时间戳和世界时间戳相比快出来8小时可以使用在线时间戳进行转换去掉8小时的秒数算出来当前的世界时间戳本地时间和UTC时间https://www.cnblogs.com/Ewarm/p/13403998.html在线时间戳转换https://tool.lu/timestamp/...
2022-02-24 14:58:36
385
原创 跑马灯动画
纯css实现的跑马灯动画const SytledWrapper = styled.div` width:300px; height: 50px; margin: 0 auto; overflow: hidden; position: relative;`const animationLeft = keyframes` from{ left:var(--startPos); } to{ left:var(--stopPos); }` c
2022-02-24 12:45:01
206
原创 两个数组，第一个数组中的随机一个数据分配给另一个数组中的每个元素
使用取余数这边我是有5个背景图但是想随机分配给每一个另一个数组的每个元素，但是使用循环的话之类的话又很复杂，于是就使用到了取余数，这边我这个背景数组里面一共有五个子元素，于是就使用另一个数组的下标去取于这个5，这样子就算不满足5的话就是0,1,2,3,4。满足5的情况下又刚好是1，这样就玩美解决了这个问题。...
2022-02-24 11:02:50
169
原创 js随机数
getRandom(min,max){ return Math.floor(Math.random()*(max-min+1))+min;}
2021-09-22 14:42:38
114
原创 React的TypeScript中事件中的三元运算符报错
遇到这种问题我们可以把三元运算符转换为if判断if(this.count >= 8){ this.count = 8}else{ this.count = this.count}
2021-09-17 17:30:31
506
原创 React中TypeScript中选项卡(附css样式)
import { Component } from "react";import './Tab.less'interface Props{}interface User{ ID:string, text:string,}interface iText{ ID:string, text:string,}interface State{ ButtonIndex:number, ButtonArray:User[], TextArray:i
2021-09-16 19:22:57
247
原创 React中TypeScript中移动端拖拽(附css样式)
import React, { Component,createRef } from "react";import './Drag.less'interface Props{}interface State{ }class Drag extends Component<Props,State>{ disY:number=0 disX:number=0 y:number=0 x:number=0 dragElement = cre
2021-09-16 19:20:15
177
原创 React中TypeScript中react-app-rewired 错解决方法
react-app-rewired降到2.0版本cnpm uninstall react-app-rewired用上面的语句删除原来的react-app-rewiredcnpm i react-app-rewired@2.0.2-next.0然后重新安装低版本的react-app-rewired
2021-09-16 10:11:44
403
原创 React中TypeScript如何配置Less、px转reem、antd-mobile和路由
创建项目create-react-app ts3 --template typescript配置lesscnpm install less-loader less --save-dev查找 node_modules 下面的react-scripts/config/webpack.config.js上面两行代码放在接着ctrl+f查找这个sassModuleRegex 放在这段注释的上面const lessRegex = /\.less$/;const lessModuleRegex
2021-09-16 09:40:03
560
原创 react-typescript构建react项目和修改源
查看源npm config get registry默认源npm config set registry https://registry.npmjs.org切换淘宝源npm config set registry https://registry.npm.taobao.org再查看一次npm config get registry显示的是下面的就表示切换好了https://registry.npm.taobao.org/然后配置cnpm npm install -g cn
2021-09-15 15:21:19
159
原创 vue中如何点击列表页跳转到详情页，并保存当前点击的位置，返回时仍是当前位置
第一步：在router文件里面的index.js写入{path: ‘/’,name: ‘Home’,component: Home,meta: {keepAlive: true //需要缓存}}上面是跳转路由，主要是把meta添加到里面第二步：还是在这个文件里面加入const router = new VueRouter({ mode: 'history', base: process.env.BASE_URL, routes, scrollBehavior (to
2021-09-10 19:14:52
2527
原创 不确定行数文本上下左右居中并且超出省略号代替
动态获取数据的时候不确定文本行数并且要求文本居中和超出的用省略号来代替.son{ overflow: hidden;//超出隐藏 text-overflow: ellipsis;//溢出用省略号显示 display: -webkit-box;// 将对象作为弹性伸缩盒子模型显示。 // 控制行数 -webkit-line-clamp: 2;//超出两行隐藏 -webkit-box-orient: vertical; // 从上到下垂直排列子元素 //（设置伸缩盒子
2021-09-09 11:38:36
212
原创 React中添加防抖阀
全局声明一个变量 在constructor中this.Time=null在你的事件中加入如下代码clearTimeout(this.Time)this.Time=setTimeout(()=>{ console.log('正在输入中')//这边是用来写你的代码的},1500)如果报错可能是this指向的问题，在你的html代码中使用bind(this)改变this的指向...
2021-09-08 11:27:52
83
原创 React中Cannot read property ‘setState‘ of undefined
在事件中添加bind(this)出现这种情况一般是this指向的问题
2021-09-08 11:10:48
140
原创 React中配置反向代理
下载依赖npm i http-proxy-middleware --save -dev在src目录下新建setupProxy.js文件const { createProxyMiddleware } = require('http-proxy-middleware') module.exports = function (app) { app.use(createProxyMiddleware('/api', { target: 'http://www.ibugthree.com',
2021-09-04 19:34:15
73
原创 React中配置antd-mobile后less和px转rem失效的问题
在config-overrides.js中修改需要添加的部分const { override, fixBabelImports, addLessLoader, addPostcssPlugins } = require('customize-cra');module.exports = override( fixBabelImports('import', { libraryName: 'antd-mobile', style: 'css',
2021-09-04 16:40:34
657
原创 React中配置antd-mobile
安装项目中依赖npm install antd-mobile --savenpm install react-app-rewired customize-cra --save-devpackage.json中需要修改的地方"scripts": { "start": "react-app-rewired start", "build": "react-app-rewired build", "test": "react-app-rewired test --env=jsdom" }
2021-09-04 16:00:04
279
原创 React中配置px转rem
React中配置px转rem安装依赖npm i lib-flexible --savenpm i postcss-px2rem --save主要用来暴露项目配置npm run eject！如果运行npm run eject报错，出错的原因应该是仓库里面代码没有提交，如下提交一下git add .git commit -m '自定义名'npm run eject然后打开项目中 config->webpack.config.js 进行配置在配置文件中添加如下代码const px
2021-09-04 15:28:34
311
原创 React中配置less
React中配置less安装lessnpm install less-loader less --save-dev查找 node_modules 下面的react-scripts/config/webpack.config.js上面两行代码放在接着ctrl+f查找这个sassModuleRegex 放在这段注释的上面const lessRegex = /\.less$/;const lessModuleRegex = /\.module\.less$/; {
2021-09-04 15:12:51
138
原创 React中配置redux
React中配置redux初始化npm install安装依赖npm i redux react-redux -S项目目录import React from 'react';import ReactDOM from 'react-dom';import './index.css';import App from './App';import reportWebVitals from './reportWebVitals';import {HashRouter as Router
2021-09-04 14:13:18
85
原创 React配置路由
如果创建好文件可以直接跳过注:图片下面有代码新建文件npm install -g create-react-appcreate-react-app '项目名称'创建好文件的直接从这一步开始npm install react-router-dom react-router-config -S在scr的index.js中引入下面的import {HashRouter as Router} from 'react-router-dom'替换成然后新建view文件夹并且创建两个文件I
2021-09-02 20:14:05
195
原创 Vue.js小球抛物线懒人代码
<template><div> <div>你的内容部分 <!-- 定义你的点击事件 --> <div class="box" @click="addClick"></div> </div> <!-- 小球代码部分 --> <div v-for="(ball, index) in balls" :key="index"> <transition name=
2021-08-10 18:36:37
233
原创 解决ios橡皮筋回弹
在ios系统中，页面在上下滑动的时候，会触发橡皮筋问题，页面的顶部和底部跟着页面一起滑动的问题，下面就讲一下如何解决这种问题。
2021-07-13 19:25:57
559
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人