- 博客(25)
- 收藏
- 关注
RSS订阅原创 CSS transition动画卡顿的探究
一、问题今天在使用css3的transition做动画过渡时，发现动画会卡顿，特此记录我发现卡顿的一些原因和笔记。先给出结论：在使用css3 transtion做动画效果时，transform实现的动画是与合成器线程相关的，不需要等待主线程样式计算或者 JS 执行，计算速度是很快的；而使用height，width，margin和padding做动画过渡时，会导致浏览器发生布局和绘制的调整，主线程需要重新计算样式并且执行JS，计算速度自然就慢了。二、以height为过渡属性时当一个元素的过渡属性为
2021-12-27 11:52:18
6964
原创 vue2项目，vuex的安装与配置
一、介绍官方解释：vuex是一个专为vue.js应用程序开发的 状态管理模式。它采用集中式存储管理应用的所有的状态，并以相应的规则保证状态以一种可预测的方式发生变化。我的理解：可以理解为是 全局变量安装：npm install vuex --save接着在src下，新建一个store目录，store里再新建index.js和module目录，module目录里再存放你自己定义的模块（不懂没关系，博主下面会有代码让你复制粘贴）我的目录:store/index.js文件：import V
2021-12-15 16:35:50
3700
1
原创 Vue项目拖拽插件 ---- vuedraggable的安装与使用
vuedraggable是基于Sortable.js的vue组件，vuedraggable官方文档特点：支持触摸设备（如vue项目的移动端开发Quasar）支持拖拽和选择文本支持不同列表之间的拖拽视图模型的同步刷新与vue2的过渡动画（transition-group）兼容有很多监听函数，当需要完全控制时，可以抛出所有变化可以和现有的UI组件相兼容一、安装npm install vuedraggable二、引入与使用<draggable v-model="specim
2021-12-14 11:20:40
9277
原创 vue中，iview框架的引入与按需引入
一、全局引入这个官网上也有，不过我也随便记录一下吧：npm install iview --saveiview推荐安装3.2.0版本以上的，那些版本才可以在table中使用slot-scope语法，用起来更方便吧。然后，在main.js中引入iview的css，使用全局注册iview就可以使用了。import iView from 'iview'import 'iview/dist/styles/iview.css'Vue.use(iView)二、按需引入iview想要按需引入
2021-12-09 19:12:19
6280
原创 vue项目，Mockjs的安装与使用
在前后端分离的项目中，后端接口可能与我们前端接口是一起开发的。此时在没有后端接口的前提下，我们就需要自己模拟后台接口，发起ajax请求。npm install axiosnpm i mockjs -S安装完axios与mockjs后，就是配置mockjs了。目录结构：./mock/index.jsconst Mock = require('mockjs');const mockFiles = require.context('./modules', false, /\.js$/); //
2021-12-06 11:51:35
1225
原创 vue2项目中安装scss
公司项目是在用vue2，而且没有安装scss，所以想自己安装个scss，但是在安装scss的过程，老是报错。这就很无语，以前都没遇过的，后来才发现时scss版本的问题，因为现在scss版本已经很高了。不能直接安装scss，而是要指定特定的版本才能在vue2中使用。如果你之前已经安装请卸载后重新安装cnpm i -D node-sass sass-loader//vue2.5.2需要降级安装cnpm i -D node-sass@4.14.1 sass-loader@7.3.1然后在build &
2021-12-03 01:43:00
5595
原创 sku商品选择的算法实现
不啰嗦了，直接上代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Sku 多维属性状态判断</title> <script src="http://misc.360buyimg.com/jdf/lib/jquery-1.6.4.js"></script> <style>
2021-12-01 23:22:56
1326
原创 axios请求没带上、没有content-type的问题
一、发现问题在我自己的小项目中，用封装过的axios发起请求时，发现get请求并没有带上content-type。我一开始还以为是我自己没设置axios请求的content-type，或者content-type写错了，后来发现，网上都是这么写的，没错啊。二、解决问题后来发现，axios默认是不会带上content-type的，你要自己去改一下，我晕。。。在axios的请求拦截器上，加上config.data = {unused: 0}，就可以在requestHeader上看到content
2021-11-30 15:03:31
6500
8
原创 vscode软件的安装与配置
一、首先在vscode官网下载vscode软件vscode官网下载傻瓜式安装后，点击完成二、插件推荐：1、Auto Close Tag （自动补全 html 标签）2、Auto Rename Tag （重命名一个HTML标签时，自动重命名配对的HTML标签）3.1、Beautify （代码格式化插件，但是需要在vscode中配置，感觉一般）文件 > 通用 > 设置 >插件 >Beautify config > settings.json/// settin
2021-11-27 11:52:39
934
原创 Typora ---- 前端笔记软件的安装与设置
前端知识的碎片性，使得很多知识学完容易忘记，所以我们就需要把一些知识记录下来，相信我们很多小伙伴都是TXT记事本玩家。现在，有了Typora，就可以告别TXT记事本啦。一、安装TyporaTypora官网下载，傻瓜式安装，建议不要安装在C盘就可以。安装完后，打开Typora，我们会看到一下界面，选择文件 > 偏好设置 > Markdown > Markdown扩展语法。勾选所有扩展功能。至此，Typora就算是弄完了。Typora操作简单，想了解更多Typora的使用方式的，也
2021-11-24 21:12:45
1056
原创 uniapp中如何引入Iconfont阿里图标库
1、下载iconfont.zip压缩包首先、在Iconfont阿里矢量图标库里新建一个自己的项目。Iconfont阿里矢量图标库不知道如何在阿里矢量图标库新建项目的，可以看我之前的博客：iconfont阿里矢量图标库的引入与使用那篇博客是在PC端运行的iconfont，这篇是如何在移动app端运行iconfont，请注意。解压你下载的iconfont项目zip压缩包，复制出里面的iconfont.css文件，再黏贴到你的uniapp项目中。 2、修改iconfont.css文件然后进入ic
2021-11-18 17:31:12
654
原创 Node.js 的安装与配置教程
Node官网1、选择LTS版本（LTS就是稳定版的意思），再点击window安装包。最好不要下载左边的最新版本，一般最新版本都有很多未知的坑，少踩为好。如果你先安装Node.js的其他历史版本，Node.js历史版本下载，这个网站有时会进不去。2、下载完成后，运行安装Node.js的过程很简单，一般都是下一步。安装路劲选择非系统盘即可（D盘等等）。其他步骤一律点击next，等待他下载完成即可3、查看node与npm是否安装成功win ＋ R打开搜索框，输入cmd打开命令行窗口
2021-11-14 16:07:06
1581
原创 iconfont阿里矢量图标库的引入与使用
首先，打开iconfont阿里矢量图标库官网，没有账号的要注册一个账号。接着选择图标库 > 官方图标库，选择你喜欢的图标库，点击进入。选择你喜欢的图标，添加入库。选择完自己喜欢的图标后，点击右上角的购物车，选择添加至项目（没项目的可以自己新建）。接着选择下载至本地，将下载的zip压缩包打开。复制里面的iconfont.css与iconfont.ttf文件到你本地项目，项目里新建一个iconfont文件夹，并将2个文件复制进来。并修改iconfont.css文件中的iconfont.
2021-11-09 15:58:37
3195
原创 jquery项目中，防重复提交的实现
在新项目中，axios能实现防重复提交的功能，不过老项目（例如jQuery）的项目中，没有axios。但是导入Ajax-hook就可以实现Ajax-hook源码地址 : https://github.com/wendux/Ajax-hook导入<script src="https://unpkg.com/ajax-hook@2.0.3/dist/ajaxhook.min.js"></script>ah对象是在导入ajaxhook.min.js后就会出现的，使用：ah.p
2021-11-07 23:50:55
1505
3
原创 uniapp如何真机测试、微信小程序端测试与模拟器测试
1、uniapp如何在真机测试首先，你的手机要打开开发者模式，下拉选择USB调试（各个手机开发开发者模式的方式不同，不懂如何打开USB调试的可以百度搜索）。接着连接数据线，选择文件传输。接着在HbuilderX中选择运行 > 运行与手机或模拟器 > 运行，就可以了。2、如何在微信小程序端运行uniapp首先，你要先下载微信开发者工具。如果不知道怎么下载微信开发者工具可以参考这篇文章微信小程序开发流程、开发者工具下载安装微信小程序开发（创建项目介绍）你要创建过一个微信小程序项目之后
2021-11-05 00:49:34
11882
3
原创 创建第一个uniapp项目与相关配置
1、进入uniapp官网uniapp官网2、下载HbuilderX快速上手 > 通过 HBuilderX 可视化界面 > HBuilderX：官方IDE下载地址将下载到的压缩文件解压，放在D盘或E盘。文件里面就有HBuilderX.exe文件，双击打开，运行。3、安装插件安装scss/sass编译插件，与es6编译插件。第一次进入插件市场时，要先注册账号才可以下载插件，注册账号的操作和注册QQ差不多，这里就不做演示了。注册成功后，就可以导入插件。之后HbuilderX
2021-11-02 23:31:59
362
原创 transition动画过渡没作用（无效）
transition无效的原因1、只给该元素赋予了过渡属性的结束值，并未在过渡前定义初始值。css.header { position: relative; width: 200px; height: 50px; background: red; transition: all 0.3s ease-in-out; }.showMenu.layui-layout-admin .header{ left:-200px; }js$(".moveHandle").click(functio
2021-10-27 00:52:17
14243
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人