燕京拾亿-优快云博客

1.下载依赖（第一个是js依赖，第二个是ts依赖）npm install smoothscroll-polyfill --savenpm i --save-dev @types/smoothscroll-polyfill2.创建tsx文件import React, { useRef, useState, useEffect } from 'react'import './index.less'import smoothscroll from 'smoothscroll-polyfi

2022-05-30 15:26:00 431 1

原创 react18.0.0+ts路由配置

1.下载依赖npm i react-router-dom@5.2.0 react-router-config @types/react-router-config @types/react-router-dom -S2.在src目录下创建views文件夹，views内创建Home，About，Navbar三个tsx文件，其中Navbar用来控制路由，其他两个页面用来展示Home:import React, { Component } from "react"; export defa

2022-05-12 21:52:59 2352 2

原创 React+Ts+Hook通过改变元素高度来实现原生下拉

tsx中// 原生下拉（改变高度实现下拉效果）import {useEffect,useRef} from 'react'import './index.less'export default () => { const PullBox=useRef<HTMLDivElement | null>(null); let disY:number = 0; let y:number=0; let scale:number=0; let clientHeigh

2022-04-11 15:32:31 816

原创 react+ts手写一个简易轮播

这里包了两个大盒子，外面的设置x轴溢出滚动属性，里面的大盒子设置的宽度比外面的盒子要大，然后js使用scrollTo设置left值实现滚动，设置属性behavior的值为smooth实现平滑过渡。这里需要用到smollscroll-polyfill插件，如果没有使用这个插件，ios平滑过渡会不管用。tsx中import { Component, createRef } from "react";import './index.less';import smoothscroll from "sm

2022-03-30 19:57:49 1066

原创 react+ts实现左右联动

index.tsx中import { Component, createRef } from "react";import './index.less'interface Props {}interface NavListType { ID: string, Content: string}interface ContentListType { ID: string, Content: string}interface State { Ind

2022-03-28 16:12:23 531

原创 react+ts项目localStorage定时清除

import React, { Component, createRef } from 'react';interface Props {}interface State {}interface List { name: string, Age: string, address: string}export default class LocalClear extends Component<Props, State> { constructo.

2022-03-28 10:39:54 1142

原创 react+ts仿浏览器

index.tsx中import React, { Component, createRef } from 'react';import './index.less'interface Props{}interface State{ ButtonList:List[] Index:number}interface List{ id:string, txt:string}export default class AA extends Component&

2022-03-28 09:13:37 591

原创 react+ts滑动双球，区间定位相应图标加色

这是在for循环的标签内使用三元运算符，刚开始让所有的按钮颜色为红色，然后判断不在那个区间中的元素，背景色设置为灰色。index.tsx中//标签里写的切换import { Component } from "react";import './index.less';interface Props {}interface State { Num: number, MaxNum: number, ButtonList:Button[],}interface Butto

2022-03-21 20:31:53 745

原创 Vue反向代理

在vue.config.js中写devServer: { proxy: { // 配置跨域 "/api": { target: 'http://www.ibugthree.com/', // 想要访问接口域名 changeOrigin: true, // 开启跨域,在本地创建一个虚拟服务,然后发送请求的数据,并同时接收请求的数据,这样服务端和服务端进行数据交互就不会有问

2022-03-21 14:37:23 1275

原创 react+ts配置别名

1.首先将config文件夹暴露出来在命令提示符中依次输入以下代码git add .git commit -m '-'npm run eject2.打开config文件夹中的webpack.config.js文件，找到alias，就如下图所示位置配置3.找到tsconfig.json文件（这个文件在最外面），在compilerOptions 中配置"baseUrl": "./", "paths": { "@/*": ["src/*"] }

2022-03-17 07:44:17 1105

原创 css文字超过两行溢出隐藏

.title { width: 300px;//设置宽 overflow: hidden; //超出隐藏 text-overflow: ellipsis; //溢出用省略号显示 display: -webkit-box; // 将对象作为弹性伸缩盒子模型显示。 // 控制行数 .

2022-03-16 09:51:59 4826 1

原创 ts版axios二次封装

src中创建一个api文件夹，里面有两个文件request.tsimport axios from "axios";export const Service = axios.create({ timeout: 8000, //延迟时间 method: 'POST', headers: { "content-Type": "application/x-www-form-urlencoded", "pc-token": "4a82b

2022-03-14 20:22:00 871

原创【React+TS】从零开始搭建react+typescript+router+redux+less+px2rem自适应+sass+axios反向代理+别名@（写到redux了）

一、通过create-react-app脚手架创建项目create-react-app 项目名 --template typescript在vscode中打开项目，可以看到顺利生成了react项目中有文件的后缀为tsx,此时说明成功创建了react+typescript项目，然后在命令提示符（也就是cmd打开的黑框）中cd+项目名进入项目，输入npm start即可打开项目。二、配置路由先下载依赖npm i react-router-dom@5.2.0 react-router-

2022-03-14 20:16:20 1831 1

原创新版react中px转rem(webpack创建的项目)

1.安装postcss-pxtoremnpm i lib-flexible postcss-pxtorem -s2.在src目录下index.js里引入lib-flexibleimport "lib-flexible";3.修改webpack.config.js（这个文件在node_modules文件夹下的react-scripts文件夹下的config文件夹中）先引入const pxtorem = require('postcss-pxtorem');然后找到下图位置添加

2022-03-14 18:10:28 1846 2

原创 vue3遇到的数据渲染的坑

vue3异步可以使用suspense组件来实现了，在App.vue文件中用suspense标签包住<router-view/>标签，数据就能异步渲染出来了<suspense><router-view/></suspense>

2022-03-11 15:39:22 838

原创 vue+ts定义axios数据类型报错解决

在src目录下创建一个名字为axios.d.ts的文件，里面写import * as axios from 'axios'// interface Item {// ID: number// activity: string// after_sale: string// authen: string// bright_point: string// buy_time: string// car_price: string//

2022-03-11 15:35:13 2145

原创 vue中阻止穿透

添加在你要阻止穿透的标签里就可以了 @touchmove.prevent @mousewheel.prevent

2022-03-11 15:30:06 3416

原创关于数组去重

基本数据类型去重arr = [...new Set(arr)]; //这个只能去重基本数据类型引用数据类型去重 var obj = {}; arr = arr(function (item, next) { obj[next.ID] ? "" : (obj[next.ID] = true && item.push(next)); return item; }, []);这是利用reduce方法遍历数组,re

2022-01-30 17:24:12 937

原创 Vue vue-lazyload懒加载

1.下载插件npm install vue-lazyload -D2.在main.js中配置（当然也可以在组件中配置）// import Vue from "vue";import VueLazyload from "vue-lazyload";Vue.use(VueLazyload, { loading: require("../../assets/images/default.gif"), //加载中显示的图片 attempt: 3, preload:700 //预加载

2022-01-24 15:36:09 499

原创微信小程序接口调用渲染

可以直接写onload函数中，也可以加在点击事件里 // 调用接口，发送网络请求 wx.request({ url: 'http://www.ibugthree.com/oldcar/getCarList/', //仅为示例，并非真实的接口地址 method: 'POST',//传输方式 //data里写的是参数 data: { page: 1, }, header

2022-01-05 15:51:36 464

原创 vue原生下拉刷新，上滑加载，延迟加载，预加载

<template> <div class="load-more"> <div class="load-more-loading">  </div> <div ref="loadMore" @touchstart="FnStart" @touchmove=.

2021-12-13 10:03:23 482

原创 react+ts双球交叉与碰撞

index.tsximport { Component } from "react";import './index.less';interface Props {}interface State { Num: number, MaxNum: number,}class Drag extends Component<Props, State>{ constructor(props: Props) { super(props); this.st

2021-12-13 08:32:46 99

原创 react+ts双球交叉和碰撞

index.tsximport { Component } from "react";import './index.less';interface Props {}interface State { Num: number, MaxNum: number,}class Drag extends Component<Props, State>{ constructor(props: Props) { super(props); this.st

2021-12-13 08:27:37 679

原创 react+ts点击返回顶部

index.tsximport './index.less'import { Component } from 'react'interface Props {}interface State {}class GoTop extends Component<Props, State>{ n: number = 0; start: number = 0; time: number = 1000; count: number = 0;

2021-12-10 10:37:52 296

原创 react+ts配置redux

下载依赖npm i react-redux react -D在公共目录src下的index.js中进行路由与redux进行连接import ReactDOM from 'react-dom';import './index.css';import App from './App';import reportWebVitals from './reportWebVitals';import {HashRouter as Router} from 'react-router-dom';

2021-12-08 11:45:49 1053

原创 TypeScript+React中axios的使用需要

在src下创建一个axios.d.ts的文件，并定义接口的类型里面写import axios from 'axios';declare module 'axios' { export interface AxiosResponse<T = any> extends Promise<T> {}}或者// axios接口的处理import * as axios from 'axios'declare module 'axios' { interfa

2021-12-07 16:16:20 905 2

原创 vue和react配置axios二次封装

先下载axiosnpm install axios然后在src文件夹里创建一个api文件夹，这个文件夹里有两个文件，request.js和index.jsrequest.js中写import axios from "axios"; export const Service = axios.create({ timeout: 3000, //延迟时间 method: 'POST', headers: { "content-Typ

2021-12-07 11:49:15 388

根据接口返回的表格数据，导出excel文件

这是一个会动的3D立方体

html+css实现3D交叉动态圆圈

html版小球抛物线.html

空空如也