- 博客(30)
- 收藏
- 关注
RSS订阅原创 搜索添加历史记录，下拉按钮追随功能
这个就是仿唯品会的搜索框，如果是你被王老师带过的话，果断一点，废话不多说上代码。如果你们有更好的代码记得私信我。html： 注意图片自己找。下面就是html代码了。
2022-09-22 11:24:41
258
2
原创 怎么用cookie解决选项卡问题刷新后怎么保持原来的选项？
什么是cookie? Cookies虽然一般都以英文名呈现，但是它还是有一个可爱的中文名“小甜饼”。Cookies是指服务器暂存放在你的电脑里的txt格式的文本文件资料，主要用于网络服务器辨别电脑使用。比如浏览网站时，Cookies 记录下来你输入的一些资料和信息。再访问同一个网站，就会依据Cookie里的内容来判断使用者，送出特定的信息内容给你。Cookies有什么作用?首先，它在使用上更便捷，比如你之前在我们新浪微博上进行登陆过用户名。下次，再登陆时，系统就可以默认你的用户名甚至是密码，节省了你的时
2022-06-13 08:49:38
152
原创 react+ts 实现选项卡功能
js：import { Component, createRef } from "react";import './index.less'interface iPorps { }interface Start { }interface ID { id: string, txt: string}export default class BoxTab extends Component<iPorps, Start>{ TabButton: ID[] = []
2022-05-05 14:24:46
635
原创 react + ts 实现 下拉刷新
js代码：// 原生下拉（改变高度实现下拉效果）import { useEffect, useRef } from 'react'import './index.less' export default function Index(){ const PullBox = useRef<HTMLDivElement | null>(null); const pulltop = useRef<HTMLDivElement | null>(null); le..
2022-04-21 09:44:16
1686
原创 react + ts 实现图片预加载和图片懒加载
/* eslint-disable no-loop-func */import "./index.less"import { useEffect, useState } from "react"import { getSearchCar } from "../../api"// 获取数据interface iCarLists { ID: number; tit_con: string; //标题 car_price: string; //价钱 img_src: s.
2022-04-21 09:42:04
930
原创 Vue 3.0 脚手架配置 (TypeScript + less的px转rem + 反向代理 + axios + vuex )
一、创建项目1.新建一个文件夹 (不能为中文)2.打开命令行窗口 方式一：文件路径栏输入 cmd 后回车效果:3.创建vue脚手架 1.命令行输入 vue create . 2.回车后提示 : 是否在此目录创建项目 输入 y后回车继续 3.选择预设 按方向键切换到最后一个 手动选择功能 然后回车 4.选择需要的功能 用空格选中 选好后回车5.选择v...
2022-04-19 16:03:00
370
原创 Typescript 实现左右联动
js部分import React, { Component, createRef } from 'react'import './linkage.less'interface Props { } interface Content { ID: string, text: string, top: number, height: number}interface Button { ID: string, text: string}interface S
2022-03-30 09:50:41
99
原创 Vue 电话号码344分割
H5和原生页面怎么交互？JSBridge：是JS和Native之前的一种通信方式。简单的说，JSBridge就是定义Native和JS的通信，Native只通过一个固定的桥对象调用JS，JS也只通过固定的桥对象调用Native。JSBridge另一个叫法及大家熟知的Hybrid app 技术。通过url scheme，app中定好方法，js通过创建iframe方式去调用H5 页面是移动端页面吗H5 页面 移动端页面 （无论是PC端还是移动端页面都可以认为是H5页面） <input
2022-03-30 09:46:28
1170
原创 react 电话344格式
主要思路：监听事件，每次号码发生改变时触发大体的逻辑是：先比较号码变化前后的长度，判断是输入还是删除，如果是输入的话，利用正则表达式改变号码格式。废话不多，上代码：html: <input type="tel" maxLength={13} placeholder='请输入手机号' onChange={this.change.bind(this)} >react 代码 change(ev: any) { ...
2022-03-29 17:31:53
1394
原创 react+ts拖拽刷新，记录位置
第一种方法：import React, { Component, createRef } from "react";import { connect } from 'react-redux';import './index.less'interface Props {}interface State {}class Drag extends Component<Props, State>{ disX: number = 0 disY: number =
2022-03-18 15:52:31
125
原创 react+ts实现小球互推，小球交叉
index.tsximport { Component } from "react";import './Small-ball.less'; interface Props { }interface State { Num: number, MaxNum: number,} class Drag extends Component<Props, State>{ constructor(props: Props) { super(props);
2022-03-18 08:46:02
96
原创 【React+TS】从零开始搭建react+typescript+router+redux+less+px2rem自适应+sass+axios反向代理+别名@+Antd-mobile
一、通过create-react-app脚手架创建项目npx create-react-app testproject --template typescript在vscode中打开项目，可以看到顺利生成了react项目且组件的后缀为tsx,此时说明成功创建了react+typescript项目的雏形在项目根目录下，运行npm run start，成功启动项目npm start二、配置路由npm i [email protected] react-ro..
2022-03-17 08:48:33
1664
1
原创 css3小球抛物线
css部分： <style> * { padding: 0; margin: 0; } html,body { width: 100%; height: 100%; } #ball { display: none; width:10px; hei
2022-03-14 14:24:48
709
原创 React+TypeScript 如何配置Redux + 使用redux
1.安装相关依赖npm add redux react-redux @types/react-redux redux-devtools-extension2.在src目下新建项目建构：3.store代码如下store入口文件 /store/index.tsimport { applyMiddleware, createStore } from "redux";import { composeWithDevTools } from "redux-devtools-e...
2021-12-08 15:31:32
215
1
原创 typescript+react项目如何配置api （axios）
1.先下载依赖npm i @types/axios -S2.在src文件夹下创建一个api的文件3.在api文件夹中创建两个 .ts结尾的文件4.request.ts中的配置import axios from "axios"; export const Service = axios.create({ timeout: 8000, //延迟时间 method: 'POST', headers: { "cont...
2021-12-07 17:07:12
323
原创 圣杯布局和双飞翼布局
圣杯布局<!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"> <title
2021-11-30 07:44:01
51
原创 Vue中query与params两种传参的区别
query语法：this.$router.push({path:“地址”,query:{id:“123”}}); 这是传递参数this.$route.query.id； 这是接受参数params语法：this.$router.push({name:“地址”,params:{id:“123”}}); 这是传递参数this.$route.params.id; 这是接受参数区别：1.首先就是写法得不同，query 得写法是 用 path 来编写传参地址，而 params 得写法是用
2021-11-26 11:35:46
559
原创 查找字符在字符串中出现的次数
第一种 let str = "kgflrgmwegwkfwqiorfemwvlkwf" let arr = str.split("") let Arr = arr.sort() let s = Arr.join("") let iMax = 0; let iMaxs = ''; s.replace(/(\w)\1+/g,function (s, s2) { if (s.length > iMax) {
2021-11-22 10:01:22
653
原创 Vue 配置反向代理以及axios二次封装
1.下载 axios npm install axios -S然后再mian.js 里面引入import axios from 'axios'Vue.prototype.axios = axios第二步：新建一个vue.config.js文件 配置反向代理 解决跨域的问题module.exports = { devServer: { proxy: { "/api": { target: 'http://www.ibugthr...
2021-11-19 19:00:18
343
原创 vue-cli 使用px2rem 或 postcss-plugin-px2rem px转换rem
1.安装插件（1）安装px2rem-loader(devDependencies)npm install px2rem-loader --save-dev（2）移动端适配解决npm包 "lib-flexible" (dependencies)npm install lib-flexible --save（3）main.js中引入 "lib-flexible"import 'lib-flexible' // 移动端适配 (目录: hello-world/src/main.j.
2021-11-19 16:20:06
362
原创 创建vue项目
1.找一个空白文件地址，在地址栏上输入cmd2.输入 vue create project3.会出现一个对话框4.需要选择对应内容 按空格选择5.选择vue 语法6.选择路由7.选择less 处理css8.Eslint9.写完一行就开始保存10. 配置项保存到文件中11.进入项目启动完成了...
2021-10-28 14:10:29
80
原创 react 滑块拖拽 （移动端）
实习移动端小球拖拽<!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"> .
2021-08-30 18:51:41
332
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人