<?xml version="1.0" encoding="utf-8" ?><rss version="2.0"><channel><title><![CDATA[aoliei的博客]]></title><description><![CDATA[]]></description><link>https://blog.youkuaiyun.com/aoliei</link><language>zh-cn</language><generator>https://blog.youkuaiyun.com/</generator><copyright><![CDATA[Copyright &copy; aoliei]]></copyright><item><title><![CDATA[搜索添加历史记录，下拉按钮追随功能]]></title><link>https://blog.youkuaiyun.com/aoliei/article/details/126988558</link><guid>https://blog.youkuaiyun.com/aoliei/article/details/126988558</guid><author>aoliei</author><pubDate>Thu, 22 Sep 2022 11:24:41 +0800</pubDate><description><![CDATA[这个就是仿唯品会的搜索框，如果是你被王老师带过的话，果断一点，废话不多说上代码。如果你们有更好的代码记得私信我。html： 注意图片自己找。下面就是html代码了。]]></description><category></category></item><item><title><![CDATA[npm设置国内源（淘宝镜像源）的几种方式，解决下载速度慢的问题]]></title><link>https://blog.youkuaiyun.com/aoliei/article/details/126647912</link><guid>https://blog.youkuaiyun.com/aoliei/article/details/126647912</guid><author>aoliei</author><pubDate>Thu, 01 Sep 2022 17:29:25 +0800</pubDate><description><![CDATA[更改下载源，]]></description><category></category></item><item><title><![CDATA[原生小球交互]]></title><link>https://blog.youkuaiyun.com/aoliei/article/details/126619750</link><guid>https://blog.youkuaiyun.com/aoliei/article/details/126619750</guid><author>aoliei</author><pubDate>Wed, 31 Aug 2022 11:02:28 +0800</pubDate><description><![CDATA[移动端小球交互]]></description><category></category></item><item><title><![CDATA[react+ts 小球抛物线]]></title><link>https://blog.youkuaiyun.com/aoliei/article/details/126536154</link><guid>https://blog.youkuaiyun.com/aoliei/article/details/126536154</guid><author>aoliei</author><pubDate>Fri, 26 Aug 2022 08:53:36 +0800</pubDate><description><![CDATA[小球抛物]]></description><category></category></item><item><title><![CDATA[小程序实现拖拽]]></title><link>https://blog.youkuaiyun.com/aoliei/article/details/126397875</link><guid>https://blog.youkuaiyun.com/aoliei/article/details/126397875</guid><author>aoliei</author><pubDate>Fri, 19 Aug 2022 09:00:00 +0800</pubDate><description><![CDATA[非常简单的实现一个拖拽]]></description><category></category></item><item><title><![CDATA[不确定行数文本上下左右居中并且超出省略号代替]]></title><link>https://blog.youkuaiyun.com/aoliei/article/details/126398060</link><guid>https://blog.youkuaiyun.com/aoliei/article/details/126398060</guid><author>aoliei</author><pubDate>Thu, 18 Aug 2022 08:25:24 +0800</pubDate><description><![CDATA[超出隐藏文字，别成省略号]]></description><category></category></item><item><title><![CDATA[小程序实现选项卡]]></title><link>https://blog.youkuaiyun.com/aoliei/article/details/126397842</link><guid>https://blog.youkuaiyun.com/aoliei/article/details/126397842</guid><author>aoliei</author><pubDate>Thu, 18 Aug 2022 07:48:49 +0800</pubDate><description><![CDATA[简简单单实现一个选项卡]]></description><category></category></item><item><title><![CDATA[react-hook和vue3.0 实现下拉刷新]]></title><link>https://blog.youkuaiyun.com/aoliei/article/details/126031952</link><guid>https://blog.youkuaiyun.com/aoliei/article/details/126031952</guid><author>aoliei</author><pubDate>Thu, 28 Jul 2022 11:56:19 +0800</pubDate><description><![CDATA[react-hook和vue3.0 实现下拉刷新]]></description><category></category></item><item><title><![CDATA[react-hook和vue3.0实现左右联动]]></title><link>https://blog.youkuaiyun.com/aoliei/article/details/126031884</link><guid>https://blog.youkuaiyun.com/aoliei/article/details/126031884</guid><author>aoliei</author><pubDate>Thu, 28 Jul 2022 11:52:38 +0800</pubDate><description><![CDATA[react-hook和vue3.0实现左右联动。]]></description><category></category></item><item><title><![CDATA[怎么用cookie解决选项卡问题刷新后怎么保持原来的选项？]]></title><link>https://blog.youkuaiyun.com/aoliei/article/details/125253446</link><guid>https://blog.youkuaiyun.com/aoliei/article/details/125253446</guid><author>aoliei</author><pubDate>Mon, 13 Jun 2022 08:49:38 +0800</pubDate><description><![CDATA[什么是cookie?   Cookies虽然一般都以英文名呈现，但是它还是有一个可爱的中文名“小甜饼”。Cookies是指服务器暂存放在你的电脑里的txt格式的文本文件资料，主要用于网络服务器辨别电脑使用。比如浏览网站时，Cookies 记录下来你输入的一些资料和信息。再访问同一个网站，就会依据Cookie里的内容来判断使用者，送出特定的信息内容给你。Cookies有什么作用?首先，它在使用上更便捷，比如你之前在我们新浪微博上进行登陆过用户名。下次，再登陆时，系统就可以默认你的用户名甚至是密码，节省了你的时]]></description><category></category></item><item><title><![CDATA[react+ts 实现选项卡功能]]></title><link>https://blog.youkuaiyun.com/aoliei/article/details/124587941</link><guid>https://blog.youkuaiyun.com/aoliei/article/details/124587941</guid><author>aoliei</author><pubDate>Thu, 05 May 2022 14:24:46 +0800</pubDate><description><![CDATA[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&lt;iPorps, Start&gt;{
    TabButton: ID[] = []]]></description><category></category></item><item><title><![CDATA[react + ts 实现 下拉刷新]]></title><link>https://blog.youkuaiyun.com/aoliei/article/details/124313944</link><guid>https://blog.youkuaiyun.com/aoliei/article/details/124313944</guid><author>aoliei</author><pubDate>Thu, 21 Apr 2022 09:44:16 +0800</pubDate><description><![CDATA[js代码：


// 原生下拉（改变高度实现下拉效果）
import { useEffect, useRef } from 'react'
import './index.less'
 
export default function Index(){
  const PullBox = useRef&lt;HTMLDivElement | null&gt;(null);
  const pulltop = useRef&lt;HTMLDivElement | null&gt;(null);

  le..]]></description><category></category></item><item><title><![CDATA[react + ts 实现图片预加载和图片懒加载]]></title><link>https://blog.youkuaiyun.com/aoliei/article/details/124313879</link><guid>https://blog.youkuaiyun.com/aoliei/article/details/124313879</guid><author>aoliei</author><pubDate>Thu, 21 Apr 2022 09:42:04 +0800</pubDate><description><![CDATA[/* 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.]]></description><category></category></item><item><title><![CDATA[Vue 3.0 脚手架配置 (TypeScript + less的px转rem + 反向代理 + axios + vuex )]]></title><link>https://blog.youkuaiyun.com/aoliei/article/details/124275196</link><guid>https://blog.youkuaiyun.com/aoliei/article/details/124275196</guid><author>aoliei</author><pubDate>Tue, 19 Apr 2022 16:03:00 +0800</pubDate><description><![CDATA[一、创建项目

1.新建一个文件夹 (不能为中文)





2.打开命令行窗口 

方式一：文件路径栏输入 cmd 后回车



效果:





3.创建vue脚手架

    1.命令行输入 vue create . 



 2.回车后提示 : 是否在此目录创建项目 输入 y后回车继续



 3.选择预设 按方向键切换到最后一个 手动选择功能 然后回车



    4.选择需要的功能 用空格选中 选好后回车



5.选择v...]]></description><category></category></item><item><title><![CDATA[Typescript 实现左右联动]]></title><link>https://blog.youkuaiyun.com/aoliei/article/details/123838702</link><guid>https://blog.youkuaiyun.com/aoliei/article/details/123838702</guid><author>aoliei</author><pubDate>Wed, 30 Mar 2022 09:50:41 +0800</pubDate><description><![CDATA[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]]></description><category></category></item><item><title><![CDATA[Vue 电话号码344分割]]></title><link>https://blog.youkuaiyun.com/aoliei/article/details/123838548</link><guid>https://blog.youkuaiyun.com/aoliei/article/details/123838548</guid><author>aoliei</author><pubDate>Wed, 30 Mar 2022 09:46:28 +0800</pubDate><description><![CDATA[H5和原生页面怎么交互？

JSBridge：是JS和Native之前的一种通信方式。简单的说，JSBridge就是定义Native和JS的通信，Native只通过一个固定的桥对象调用JS，JS也只通过固定的桥对象调用Native。JSBridge另一个叫法及大家熟知的Hybrid app 技术。

通过url scheme，app中定好方法，js通过创建iframe方式去调用

H5 页面是移动端页面吗

H5 页面 移动端页面 （无论是PC端还是移动端页面都可以认为是H5页面）


 &lt;input]]></description><category></category></item><item><title><![CDATA[react 电话344格式]]></title><link>https://blog.youkuaiyun.com/aoliei/article/details/123827243</link><guid>https://blog.youkuaiyun.com/aoliei/article/details/123827243</guid><author>aoliei</author><pubDate>Tue, 29 Mar 2022 17:31:53 +0800</pubDate><description><![CDATA[主要思路：

监听事件，每次号码发生改变时触发
大体的逻辑是：先比较号码变化前后的长度，判断是输入还是删除，如果是输入的话，利用正则表达式改变号码格式。

废话不多，上代码：

html:


                            &lt;input type="tel" maxLength={13} placeholder='请输入手机号' onChange={this.change.bind(this)} &gt;


react 代码
 change(ev: any) {
  ...]]></description><category></category></item><item><title><![CDATA[react+ts拖拽刷新，记录位置]]></title><link>https://blog.youkuaiyun.com/aoliei/article/details/123576846</link><guid>https://blog.youkuaiyun.com/aoliei/article/details/123576846</guid><author>aoliei</author><pubDate>Fri, 18 Mar 2022 15:52:31 +0800</pubDate><description><![CDATA[第一种方法：


import React, { Component, createRef } from "react";
import { connect } from 'react-redux';

import './index.less'
interface Props {

}
interface State {

}

class Drag extends Component&lt;Props, State&gt;{
    disX: number = 0
    disY: number =]]></description><category></category></item><item><title><![CDATA[react+ts实现小球互推，小球交叉]]></title><link>https://blog.youkuaiyun.com/aoliei/article/details/123565602</link><guid>https://blog.youkuaiyun.com/aoliei/article/details/123565602</guid><author>aoliei</author><pubDate>Fri, 18 Mar 2022 08:46:02 +0800</pubDate><description><![CDATA[index.tsx


import { Component } from "react";
import './Small-ball.less';
 
interface Props {
 
}
interface State {
  Num: number,
  MaxNum: number,
}
 
 
class Drag extends Component&lt;Props, State&gt;{
  constructor(props: Props) {
    super(props);
  ]]></description><category></category></item><item><title><![CDATA[【React+TS】从零开始搭建react+typescript+router+redux+less+px2rem自适应+sass+axios反向代理+别名@+Antd-mobile]]></title><link>https://blog.youkuaiyun.com/aoliei/article/details/123541158</link><guid>https://blog.youkuaiyun.com/aoliei/article/details/123541158</guid><author>aoliei</author><pubDate>Thu, 17 Mar 2022 08:48:33 +0800</pubDate><description><![CDATA[一、通过create-react-app脚手架创建项目


npx create-react-app testproject --template typescript



在vscode中打开项目，可以看到顺利生成了react项目且组件的后缀为tsx,此时说明成功创建了react+typescript项目的雏形



在项目根目录下，运行npm run start，成功启动项目




npm start

二、配置路由


npm i react-router-dom@5.2.0 react-ro..]]></description><category></category></item></channel></rss>