自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+

原创 前端处理较大数据量防止页面卡死的方法

假设后台一下返回1000条数据,如果我们一次性把它放到页面上,那肯定会造成页面卡顿的,优化思路就是,把列表分割成很多个小数组,然后一段一段的显示到页面。可利用 Api:window.requestAnimationFrame或者setInterval不断填充数据;window.requestAnimationFrame()告诉浏览器——你希望执行一个动画,并且要求浏览器在下次重绘之前调用指定的回调函数更新动画。该方法需要传入一个回调函数作为参数,该回调函数会在浏览器下一次重绘之前执行;// d..

2020-05-21 21:15:27 1929

原创 js实现定点缩放元素

这里的关键一点在于,比如,当元素宽度放大0.1倍时,如何计算元素的left值来保证鼠标相对元素位置不变?代码:// 为了方便用了jqueryexport default function(el) { function zoom(e) { e.preventDefault(); // 获取鼠标所在位置 let { clientX, clientY }...

2019-11-29 20:34:03 233

原创 vue实现简单的前端分页功能

思路:假设每页显示10条,一共100条,那么共10页,第一页显示1-10条数据,第二页显示11-20条数据...以此类推是不是有思路了代码:let productList = [];for (let i = 0; i < 99; i++) { productList.push({ name: "第" + i + "瓶奶酪", c...

2018-11-16 15:39:41 8093 18

原创 vue实现简单的分页功能

分页其实就是对一组数据分组!而vue又刚好是数据驱动,所以我们只需要关注数据层就行了!分页开始--->变量: data() { return { // 假设这是后台传来的数据来源 data: [], // 所有页面的数据 totalPage: [], // 每页显示数量 pageSize: 5,...

2018-09-15 16:09:54 26221 12

原创 两种实现点击'对话框'以外的区域,'对话框'消失的方法。

html:<div class="wrap"> <div class="content"> </div></div>第一种思路:当前点击的对象不是对话框本身,则让对话框消失var wrap = document.getElementsByClassName('wrap')[0];var conten...

2018-08-20 18:03:14 1175

原创 react-router4简易示例教程

搜了好多react-route4r教程,都没有个简单完整的路由跳转示例,还不如简单粗暴的来个怎么用的示例!上代码!import React from 'react';import {Switch,Link,Route,BrowserRouter} from 'react-router-dom';export default class App extends React.Compon...

2018-08-09 16:36:57 870

原创 按需加载图片、html代码、js代码,前端页面性能优化

加载一个比较长的页面,或者图片比较多的页面,如果把资源一次性全部加载,在网络不是很好的情况下可能造成页面留白现象,用户体验极差!因此呢,我们可以把用户暂时不会看到或用到的资源先不加载,在某个条件下,如鼠标点击、滚动条高度到某一位置,窗口大小改变等等,按需加载资源!1.按需加载图片 用data-src设置个无效图片地址,滚动条快滚动到图片要显示时,把真正要显示的图片替换回来(...

2018-08-03 14:42:04 2445

原创 vscode jsx语法自动补全html闭合标签

<div>标签头要自己敲,敲级累呀~</div>初学react想必都经历过这个,感觉很不爽吧,还好,神通广大的vscode可能会让你受累,但绝对不会让你失望!想要让在jsx实现自动补全闭合标签,现在只需一步:文件--首选项--设置--用户设置,输入emmet.includeLanguages搜索,点击圈住的地方,编辑settings.json在用户设置添...

2018-08-01 11:00:39 9153 1

原创 一看就懂:自定义checkbox的样式(更改input表单控件的自定义样式)

默认的checkbox可能不能满足UI需求,而默认的样式是不能直接修改的,那该如何修改呢?在改样式之前我们建议先了解<label>标签属性。我们发现,可以通过label来操控关联的表单控件,于是,我们的思路是:把input的样式隐藏起来,通过设计label的样式(也就是input的样式)然后通过定位用label覆盖input,这样功能和样式都是一致的。这里我们以ch...

2018-07-24 16:29:14 14758

原创 利用express(nodejs)实现的前后端分离,包教包会!

首先确保你安装了nodejs,安装教程和利用vue-cli初始化一个项目在这就不娓娓道来了。(这里用vue-cli构建的项目,如果不是,只需要在客户端更换成其他请求数据的方法就好了)一.现在是上午10点,精神很饱满,我们先来搭建一下服务端吧!1>>在你的项目下新建一个server的文件夹,新建index.js和user.json,一个搭建服务器,一个用来存要返回客户端的js...

2018-07-10 10:48:22 11245 1

原创 前端要会的一些ps切图和和ps技巧!

 一,图层切图:(这车开的有点稳,但注意跟上节奏)1.左上角:文件-打开 你要处理的图 。注意,打开psd文件会有提示,如果用图层抠图的话,则保留图层,不然选择拼合。2.选择右上角这个"移动选择工具"(这个工具还可以随意移动目标O),然后点击目标,这时软件右下角边图层那里,会自动定位到你点击的图层。3.点击那只眼睛,锁定的目标消失了,则说明是当前选择的图层。(我们不要的图层都可以用...

2018-06-20 16:33:10 1521 1

原创 $(window).scroll()无法触发滚动条事件的问题

滚动条事件很常见。但有的时候竟会无法触发这个事件,真的让人有点捉急!首先我们看,$(window).scroll(),是window的滚动,window代表的是当前窗口,但是如果我们把html和body设置了width:100%;height:100%;则无法$(window).scroll的滚动条事件。解决办法是,把window换成你页面的其他元素,比如一个网页的容器,如clas...

2018-06-12 15:07:56 9222 3

原创 解决轮播图图片大小不一的问题!

 要把大小不一样的图片做成整齐排列的轮播,如果直接固定宽高会把图片伸缩变形的,不固定又会让图片不整齐,用ps截图截成一样的大小难度系数略高。看似头大的问题,现在解决,只需2步:1.假如有4张图,我们就先写4个一样大小一样的div.给div设置display:inline-block和一样的宽高。2.然后将图片作为div的背景图来显示。这样保证了呈现的每张图都是一样大的!利用ba...

2018-06-11 13:49:30 10500 1

原创 不让图片失真,使大小不一的图片整齐排列!

作为前端er,肯定碰到过将一组要将一组图标整齐排列的问题,图片一样大还好,不一样大的话,没经验还真是烦人呢。如图,排列不整齐美观。为了方便你我他,我加了边框如果粗暴的把图片设置为一样大小,那图片会失去原有比例,导致伸缩,不雅。一个一个调整也不靠谱。如何是好。其实很简单,在给4个图片外面分别加个一样大小的div,然后让图片居中就好啦。 div {border: 1px ...

2018-06-09 13:54:03 2494

提示
确定要删除当前文章?
取消 删除