- 博客(134)
- 收藏
- 关注
RSS订阅原创 记录下学的性能优化
字体未下载完成时,浏览器隐藏或自动降级,导致字体闪烁Flash Of Invisible Text :文字从看不到到看得到Flash Of Unstyled Text: 文字开始的时候是一种样式,后面变成另一种样式这两个问题都是没办法避免的,字体网络下载需要一定的时间,只要没下载完成,那浏览器就必须做出一个选择,要么等待字体下载完把字体显示出来,要么先用已有的字体等下载完再更改.但是总归到底,我们都希望内容先显示,所以会选择第二种状态,这个可以用一个属性控制这种行为,那就是。
2023-11-20 21:15:45
449
原创 H5巧用replace返回上一页带参
我的想法是AB两个页面，A页面跳转到B页面的时候用replace跳转，这时候历史记录就只有B，A已经被删掉了。从B页面回到A页面时，监听回退操作时通知APP不要执行回退操作，然后再用replace跳回A，这时历史记录只有A了。
2022-10-15 11:19:52
833
原创 [plugin:vite:css] variable @base-color is undefined
[plugin:vite:css] variable @base-color is undefined
2022-09-07 17:57:24
4409
原创 react使用脚手架搭建
一.创建项目并启动1.1全局安装npm install -g create-react-app1.2 创建项目create-react-app 这里写你的项目名1.3进入项目文件夹cd 步骤二写的项目名1.4启动项目npm start二.脚手架文件介绍
2022-08-12 00:46:27
1024
原创 react入门（html形式学习）
react特点:1.采用组件化模式、声明式编程，提高开发效率及组件复用率。2.在React Native中可以使用React语法进行移动端开发。3.使用虚拟DOM+优秀的Diffing算法,尽量减少与真实DOM的交互.一、入门1.初识react案例2.虚拟dom的两种创建方式2.1用jsx实现用这种写法,其实最终也是转译成2.2js那种写法的,jsx就相当于2.2的js写法的语法糖<body> <!-- 准备好一个"容器 --> &l.
2022-05-26 00:40:12
1440
原创 element下拉组件多选+异步搜索的坑————diff算法
这是我当时的代码，我使用了index作为key,当时的场景是这样的:1.第一次我选择了张晓宇,它这时位于列表第三2.我搜索"张"这个字,并向后端发送请求重新获取数据渲染列表3.此时张晓宇位于第一位,蓝的勾选的位置也在第一位,但是可以观察input框此时第一位的名字(lable)是重新获取数据后排位第三的张*鹏,而并非张晓宇。解决方式像下面这串代码一样绑定唯一值就可以了,造成这样的原因我猜测是diff算法的原因.:key=“iabilityManItem.id” <el-form-.
2022-05-26 00:39:46
484
原创 vue3中使用路由
1.安装官网链接https://router.vuejs.org/installation.html#direct-download-cdnnpm install vue-router@42.创建文件夹src\router\index.ts// 1.导入import { createRouter, createWebHashHistory } from 'vue-router'const routes = [ { path: '/', name: '', componen
2022-04-06 22:29:38
3725
原创 webpack5(上)
一、小试webpack1.安装webpack前提条件:在开始之前请确保安装了node.js,因为webpack是在node基础上运行了.webpack安装有两种:1.全局安装2.在本地工作目录下安装.安装webpack需要安装两个包:1.webpack主包2.webpack-cli,这个安装好后可以在命令行里执行命令1.1全局安装global是指在全局的情况下安装 npm install webpack webpack-cli --global查看webpack -v1
2022-03-22 16:20:31
2062
原创 从0到1学vue3
根据B站尚硅谷学的,这里做个人记录一.认识vue31.了解相关信息vue3支持vue2的大多数特性更好的支持Typescript2.性能提升打包大小减少41%初次渲染快55%,更新渲染快133%内存减少54%使用Proxy代替defineProperty实现数据响应式重写虚拟DOM的实现和Tree-Shaking3.新增特性Composition(组合)APIsetupref和reactivecomputed和watch新的生命周期函数provide
2022-03-19 17:28:32
1623
原创 Vue中使用tailwindcss
一、下载tailwindcssnpm install tailwindcss二、引入tailwindcss创建样式文件夹,或在现有文件夹引入,例如style/index.css@import "tailwindcss/base";@import "tailwindcss/components";@import "tailwindcss/utilities";然后引入main.jsimport './styles/index.css'三、初始化npx tailwin
2021-12-25 12:15:28
3236
原创 手撕promise
promise的特点1.创建时必须传入一个函数,否则会报错2.会给传入的函数设置两个回调函数3. 刚创建的promise对象状态是pending4.状态一旦发生改变就不可再次改变5.可以通过then来监听状态的改变6.如果添加监听时状态已经改变,立即执行监听的回调7.如果添加监听时状态还未改变,那么状态改变时候再执行监听回调8.同一个promise对象可以添加多个then监听,状态改变时所有的监听按照添加顺序执行9.then方法每次执行完毕都会返回一个新的promise对象10.上一个
2021-11-28 17:36:00
669
原创 腾讯云TRTC常见问题分析
----Web篇极其多坑,机器多兼容,我们已经弃用了,甚至有些现在没法用言语描述…1.NotAllowedError: The request is not allowed by the user agent or the platform in the current context, possibly because the user denied permission. <PLAY_NOT_ALLOWED 0x4043>0x4043 就是浏览器自动播放限制的报错，先看看这个文
2021-11-11 00:42:18
4447
原创 vue.draggable拖拽与点击冲突解决方案,兼容安卓与15版本iOS
在用这个插件的时候有遇到不少将点击事件当成是拖拽事件,并且使用.stop.prevent也无法阻止的情况,其中个人认为方法二最有效.方法一:添加delay="1",这个功能是鼠标按下后多久可以拖拽,主要针对部分安卓机.方法二::fallbackTolerance="3",拖拽之前应该移动的px,主要针对新版本iOS方法三:将需要拖拽的内容写成组件,点击时通过$emit告诉父组件并处理业务. <Draggable v-model="selectedList" .
2021-09-05 13:26:44
2846
原创 从0到1学习typeScript
一 安装npm install -g typescript二 TS编译成ES5/ES6浏览器不支持ts语法,所以需要编译成es5或es6tsc index.ts三 Typescript 开发工具 Vscode 自动编译.ts文件1.创建tsconfig.json文件 tsc --init 生成配置文件 tsc --init2.配置json文件,改为js地址如果有报错可以参考这连接------点我啊四 ts数据类型booleannumberstring
2021-08-12 20:15:21
352
原创 微信小程序接入腾讯云实时音视频TRTC----基本使用
一.在腾讯云申请账号，拿到adkAppID二.下载腾讯云demo三.分析demo跑通Demo与快速集成有官方介绍,以下记录自己理解.
2021-08-12 11:15:32
4919
1
原创 用dom-to-image生成HTML图片模糊问题
项目node_modules找到dom-to-image,修改src下的js文件(function (global) { 'use strict'; var util = newUtil(); var inliner = newInliner(); var fontFaces = newFontFaces(); var images = newImages(); // Default impl options var defaultOpt..
2021-07-30 10:01:02
1368
1
原创 前端H5兼容移动端常见问题
兼容ios1.video视频不能在ios自动播放当时是轮播视频,设置好自动播放,并且允许在小窗内播放,让ios那边配置就好了.<video :id="'video' + index" :ref="'video' + index" v-if="item.type == 2" autoplay="autoplay" loop="loop"
2021-06-13 15:09:35
2577
原创 Vue Whitelabel Error Page错误
这个错误网上有很多解决办法,但是这里提供一个另类的可能存在的问题导致的…vue-cli设置路径的publicPath与代理路径不可以重复.否则会报错只要设定其他非敏感或重复字段都可以
2021-05-19 15:09:37
3179
原创 异常处理机制
1.JS中的异常简单粗暴的意思是有错误无限,由于JS是单线程的,编写的代码都是串行的,所以一旦前面代码出现错误,程序就会被中断,后续代码就不会被执行2.JS中的异常处理2.1自身编写代码问题–>手动修复BUG2.2外界原因问题,–>try{}catch{}对于以下可预见的异常,我们可以使用try{},catch{}来处理3.JS中如何进行异常处理利用try{}catch{}来处理异常可以保证程序不被中断,也可以记录错误原因以便后续优化迭代更新try/catch不能单独
2021-05-16 12:30:44
143
原创 promise的基本概念与使用
什么是promise?promise是ES6中新增的异步编程解决方案,在代码中的表现是一个对象.需求:从网络上加载3个资源,要求加载完资源1才能加载资源2,加载完资源2才能加载资源3,前面任何一个资源加载失败,后续资源都不加载<script>function request(fn) { // 模拟发送异步请求 setTimeout(() => { fn("拿到的数据"); }, 1000);}request((data) => { consol
2021-05-16 12:12:40
316
原创 使用Vue.observable()进行状态管理
父组件<template> <div> <button @click="handleClick">我是父组件</button> <test1 /> <p>{{ store.title }}</p> <p>count:{{ store.count }}</p> </div></template><script>impo
2021-05-08 12:03:27
213
原创 遍历vue动态组件
component 的is中传入组件名,需要注意的是必须将可能用到的组件先注册才能使用.父组件<template> <div> <div v-for="(item,index) in list" :key="index"> <component :is="item"></component> </div> </div></template><script&g.
2021-05-07 17:58:51
1007
原创 串行与并行的理解
什么是串行?串行就是按顺序执行,好比银行只有1个窗口,有3个人要办事,那么必须排队,只有前面的人办完走人才可以继续下一个.在计算机中,同一时刻,只能有一条指令,在一个CPU上执行,后面的指令必须等到前面指令执行完毕才能执行什么是并行?并行就是同事执行,就好比单个窗口有3个人要办事,只需要到空窗口即可立即办事在计算机中,同一时刻,有多条指令,在多个CPU上执行,就是并行从以上分析不难看出,并行的速度由于串行.js串行与事件循环1.JS是单线程的所以js中的代码都是串行的,前面没
2021-05-05 21:41:58
4809
原创 进程与线程的理解
1.什么是程序？程序是指将编译型语言编写好的代码通过编译工具编译之后储存在硬盘上的一个二进制文件，会占用磁盘空间，但不会占用系统资源。例如我们通过C++编写了一个聊天程序，然后通过C++编译器将编写好的代码编译成一个二进制的文件，那么这个二进制的文件就是一个程序。2.什么是进程？进程是指程序在操作系统中的一次执行过程，是系统进行资源分配和调度的基本单位。例如：启动记事本这个程序，在系统中就会创建一个记事本进程。再次启动记事本这个程序，又会在系统中创建一个记事本进程。程序与进
2021-05-05 21:15:51
114
原创 轮播视频与图片,判断视频播放完毕再切换
逻辑<template> <div> <van-swipe class="my-swipe" style="height: 300px" vertical :autoplay="autoplay" indicator-color="white" @change="onChange" > <van-swipe-item v-for="(item, index)
2021-04-29 15:53:33
810
原创 vue动态添加图片/背景图
普通动态添加背景图 <div class="serviceDate" :style="{ 'background-image': `url(${require('../../assets/weekComment/bannerCard_' + serviceInfo.code + '.png')})`, }" > </div>注意:如果变量回来的慢会报错,那就在父盒子添
2021-04-25 09:43:33
4925
4
原创 微信账单动态吸顶功能实现逻辑
打开微信账单划拉到不同月份时,会将当月的汇总吸附在手机顶端,动态改变数据.真实微信怎么实现的我不知道,但是我实现的方式是做一个障眼法.1.当普通列表遍历.2.判断出需要吸顶那部分的条件,给出吸顶距离3.所以所有满足条件的元素到了合适的位置就会固定住,不需要判断滚动.它会层叠上去,而不用改变原有的值.完整代码在末尾,用的是vantUi,但实现逻辑一样效果<template> <div id="app"> <!-- 列表 --> &..
2021-04-24 10:34:35
565
3
原创 快速将后台数据处理为另一种数据
示例场景为后台传来阿拉伯数字,现在需要根据对应字段转为英文格式的日期.如果返回的字段是别的形式,只需要将key替换成业务中的数据,value为所需格式即可,跟对象的写法一样. <div>{{ stepsItem.week | formatDate }}</div> filters: { // 格式化英文日期 formatDate(value) { let dateObj = { 1: "Mon", 2: "Tue".
2021-04-17 17:34:17
133
原创 记录工作遇到时间的各种处理
1.vant中倒计时处理效果由于vant返回的就是HH: mm : ss 格式,所以切割就可以了,如果返回的是其他格式例如2021-4-17之类的,就得先加入new Date()中,再分别取出年月日切割. <!-- 引入倒计时 --> <van-count-down :time="time" format="HH: mm : ss "> <template #default="timeData">
2021-04-17 17:23:14
189
原创 跨多层传值,孙父组件传值
重点是子组件加入$listeners父组件<template> <div id="app"> <Son @test="getValue($event)"/> </div></template> <script>import Son from '../components/Son'export default { name: 'App', components: { Son }, .
2021-04-02 15:28:49
403
原创 工作记录---自定义vant年时间选择器
工作中需要用到单独是年的时间选择器,发现vant中唯独没有年的,所以自己写了一个,也不难,就是弹出层和选择器组合,为方便后续用,所以记录.如果是按需引入,需要引入Popup 弹出层和Picker 选择器<template> <div> <div class="navigate between_center"> <div class="timeSelect"> <div class="datetimePick.
2021-04-02 15:04:34
1267
原创 vue自定义步骤行程条
<template> <div> <div class=" steps"> <div class=" stepsRightBox"> <!-- 跟随的样式 --> <div class="stepsLine"> <!-- 圆点,可以改为图片 --> <i></i> <!-- 虚线,
2021-03-31 11:42:06
620
原创 vant中tab贴切业务使用
1.取消下划线// 取消下划线.van-tabs__line { background-color: transparent;}2.设置某个便签为自定义色 <!-- title-class自定义类名 --> <van-tab title-class="screen"> <template #title>筛选 </template> 筛选 </van-tab>
2021-03-14 13:56:26
1496
原创 遍历富文本数据出现横向滚动
有试过遍历后台返回富文本模式,用v-html解析后但是依然出现横向滚动问题,结构崩坏,这是因为图片溢出了.当时即使设置图片宽度也无效.神仙同事教我/deep/深度设置宽度,可以尝试下. .detailHtml { width: 750px; box-sizing: border-box; /deep/ img { width: 100%; } }...
2021-03-14 11:58:01
166
原创 快速查询url参数的方法
在vue跳转小程序或者多页面开发时,有时用不了router,只能用原生方法查询参数,神仙同事教我的方法,现在记录一下. mounted() { this.userInfo.openid = this.getQueryString("openid");//在这里传入你想搜索的关键词,例如openid this.userInfo.storeId = this.getQueryString("storeId");//在这里传入你想搜索的关键词,例如storeId }, methods.
2021-03-14 11:48:35
1360
原创 vant中list用法与首次加载触发两次解决问题
以下是list的基本使用方法,主要原理就是当页面数据小于offset这个高度的时候,就会触发load,在load里面需要调用接口发送下一页的数据.所以发送完毕后需要将设置分页的属性加一,并将获取到的新值push进接收数据的数组里,而不是直接赋值,如果直接赋值那么数组里就只有新值,之前的值就被覆盖.调用完以后将loading的样式关闭,并且判断数据库中还有没有数据,如果没有,就将finished为true,表示已经加载完毕了.首次加载触发两次解决问题1.在mounted或者create调用,原因是有.
2021-03-14 11:37:45
6887
6
原创 静态数据与动态数据
电脑有两个常用且重要的组成部分，分别为内存与硬盘，都是用来存储数据的。不同点在于，内存是用来存储动态数据的，硬盘是用来存储静态数据。静态数据：静态数据是指一些永久性的数据，一般储存在硬盘中。储存空间大，普通计算机的硬盘有500G左右，因此可以存放比较大的文件。储存的时长：只要不主动删除或硬盘损坏数据永远都在。哪些是静态数据：静态数据一般是以文件的形式存储在硬盘上，比如文档、照片、视频等。动态数据：动态数据指在程序运行过程中，动态产生的临时数据，一般存储在内存中。储存空间小，一般普通计.
2021-02-22 17:55:55
4453
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人