- 博客(53)
- 收藏
- 关注
RSS订阅原创 css写聚光灯效果
用比较简单的办法实现聚光灯的效果，利用radial-gradient() 函数写的，因为这个函数是径向渐变创建 “图像”<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Docu..
2020-09-10 16:39:31
268
原创 keep-alive中需要刷新一部分页面的操作
作用：在vue项目中,难免会有列表页面或者搜索结果列表页面,点击某个结果之后,返回回来时,如果不对结果页面进行缓存,那么返回列表页面的时候会回到初始状态,但是我们想要的结果是返回时这个页面还是之前搜索的结果列表,这时候就需要用到vue的keep-alive技术了.介绍： keep-alive 是 Vue 内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染。实际项目中,需要配合vue-router共同使用.router-view 也是一个组件，如果直接被包在 keep-alive 里面，所
2020-09-09 14:09:55
1229
原创 Uncaught SyntaxError: Unexpected token o in JSON at position 1问题的解决
在用到JSON.parse()的时候可能会经常遇到这种错误比较烦人，查找一番资料后发现，是因为变量的类型不一样可能会导致这个错误，JSON.parse()里的参数只能是string类型，当为obj的时候就会出现这个错误，那这样就比较好解决判断一下就可以了（前提是你需要转的参数是json格式的哦）...
2020-09-09 10:53:34
1623
原创 H5直播时疯狂点赞的实现
CSS3 实现用 CSS3 实现动画，显然，我们想到的是用 animation 。首先看下 animation 合并写法，具体含义就不解释了，如果需要可以自行了解。animation: name duration timing-function delay iteration-count direction fill-mode play-state;我们开始来一步一步实现。Step 1: 固定区域，设置基本样式首先，我们先准备 1 张点赞动画图片：看一下 HTML 结构。外层一个结构固定整个.
2020-06-16 17:00:08
849
原创 算法之数组
一种最基础的数据结构，每种编程语言都有，它编号从 0 开始，代表一组连续的储存结构，用来储存同一种类型的数据。数组：let array = [1, 2, 3]栈： let stack = [1, 2, 3] //进栈 stack.push(4) //出栈 stack.pop()队列：let queue = [1, 2, 3] //进队 queue.push(4) //出队
2020-06-02 22:07:18
171
原创 TinyMCE富文本编辑器
安装tinymce-vuenpm install @tinymce/tinymce-vue -S下载tinymcenpm install tinymce -S下载tinymce完成后在node_modules 中找到 tinymce/skins目录，将其复制到public下新建的文件夹tinymce里，在下载中文语音包中文语音包下载完解压之后的结构是：封装一个Editor的组件:<template> <div class="tinymce-editor">
2020-06-02 10:14:05
255
原创 苹果营销页中几个有趣的交互（粘性定位sticky,滚动视差 background-attachment）
翻盖效果一个是屏幕慢慢打开的效果，在屏幕打开的过程中，电脑图片 是在屏幕中固定不动的，直到打开完毕或者关闭完毕的时候再让 电脑图片 随着滚动条滚动。粘性定位 sticky可以简单的认为是 相对定位 relative 和 固定定位 fixed 的混合，元素在跨越指定范围前为相对定位，之后为固定定位。sticky 元素固定的相对偏移是相对于离它最近的具有滚动框的祖先元素，如果祖先元素都不可以滚动，那么是相对于 viewport 来计算元素的偏移量。粘性定位中有一个“流盒”（flow box）的概念，
2020-05-27 10:53:49
625
原创 vue处理sku的一种方法（返回已有库存组合好的）
总体实现思路接口获取现有库存列表以及sku规格属性列表（坑：库存可能存在某个商品规格没有，所以最全的规格属性应该是接口获取的，而不是渲染库存得到的）sku规格属性列表与库存列表对比，将没有库存的选项置灰点击某一个具体的属性，将其置为已选状态或取消已选状态循环规格属性列表，将disabled置为true，然后拿所有规格属性的每一项分别与已选中的数据的每一项，组成一个新的比较项，与现有库存比较，找到存在的可点项，将可点击项置disable置为false库存列表为：[“小,绿,one”,“小,绿.
2020-05-26 17:33:04
1020
1
原创 解决小程序自定义tabbar栏切换闪屏的效果（uniapp自定义同样解决）
话不多说，直接上代码解决问题自定义导航栏的时候会定义一个tabbar的页面，如下：（需求不一样代码不一样，大致效果是一样的）<view class="tabbar"> <view class="tabbar-item" @click="onChange(1)"> <image v-if="'pages/index/index' == curretnPa...
2020-03-20 14:56:03
15898
15
原创 H5页面必会遇到的问题及解决办法
前言在我们开发H5页面的时候必会遇到一些兼容性等爬过坑的问题，在这里我将这些问题汇总一下，自己也做一下笔记问题：1,ios滑动不流畅2，ios上拉边界下拉出现白色空白3，页面件放大或缩小不确定性行为4，click点击穿透与延迟5，软键盘弹出将页面顶起，收起未回落问题（导致整体页面上移）6,iphonex 底部栏适配问题7，保存页面为图片和二维码问题和解决方案8，微信公众号H5分...
2020-03-17 10:06:44
2316
原创 基于vue商品图片轮播和放大镜的方案
实现原理放大镜的原理用一句话概括，就是根据小图上的鼠标位置去定位大图。原理图（以2倍放大为例）相信原理图已经画的很明白了， 图中，左侧框是小图框，其蓝色区域为图片遮罩层（需放大区域），右侧框是整个大图目前所在区域，其蓝色区域是放大区域，设置超出隐藏，就实现了放大遮罩区域的效果。显然，两块蓝色区域存在着某种对应关系，即遮罩的左上角位置（相对于小图，以下称 X 坐标）和放大区域（相对于大图）...
2020-03-06 15:46:55
2262
1
原创 如何在github上精准找到你想要的项目
不知道小伙伴们一开始接触github有没有这样的一个疑问，当我们想找一个vue的后台管理项目时，你可能只会打开github网站，在搜索栏直接输入vue，会看到一堆的结果，这时你找了几页都没发现你需要的，你可能就直接放弃了。我一开始也和上述一样的，所以每次在github都找不到我所想要的，但是。。。开源项目的组成部分开源项目一般都会有这些组成部分：name:项目名description：...
2020-02-13 10:48:22
5644
原创 vue中的虚拟dom和diff算法
虚拟dom概念虚拟DOM（Virtual DOM）是对DOM的JS抽象表示，它们是JS对象，能够描述DOM结构和关系。应用的各种状态变化会作用于虚拟DOM，最终映射到DOM上。js在操作数据时希望有个中间层，这个中间层就是虚拟dom操作，当我们对中间层进行操作的时候我希望可以直接转换成dom，那么这中间的两个操作分别是数据响应式和打补丁（patch）工作机制： js操作=》dom 数据...
2020-02-12 18:20:55
733
原创 vue批量异步更新策略
异步更新队列vue高效的秘诀是一套批量，异步的更新策略在程序中有好多个组件，每个组件对应一个watch实例，在一次事件循环更新周期内，可能有好多数据发生变化，可能每个组件都会变，这时候最好的方式就是将组件批量的一次更新完之后，浏览器再刷新页面，这时候是最高效的做法概念事件循环：浏览器为了协调事件处理、脚本执行、网络请求和渲染等任务而制定的一套工作机制。宏任务：代表一个个离散的、独立...
2020-02-12 13:32:56
1184
原创 css世界（面试题）
1，介绍下 BFC 及其应用概念：BFC就是块级格式上下文，是页面盒模型（ie和w3c标准）布局中的一种css渲染方式，是一个独立的容器，这个独立容器里面的元素和外面的元素互不干扰，不会影响外面的元素。创建BFC：html的根元素floa浮动绝对定位overflow不为visiabledisplay为表格布局或弹性布局时BFC应用：1，清除浮动2，防止同一BFC容器中相邻的...
2020-02-11 14:41:59
158
原创 小程序城市联动
wxml<view class="searchLetter touchClass"> <view wx:for="{{searchLetter}}" style="color:#666666;font-size:24rpx;height: {{itemH}}px;line-height: {{itemH}}px;" wx:key="index" data-letter="{...
2020-01-03 10:26:09
256
原创 使用uni-app做小程序的坑
校验https这个坑是真的让我很难受的，在小程序的开发者工具里面，是不自动检验的，一定一定要把这个√给去掉，因为测试版本确实不检验https但是正式版本的都需要检验，所以一定要用https定位使用uni-app定位时需要引入小程序的js（qqmap-wx-jssdk.js）我用的是腾讯的api文档使用小程序自带的uni.getLocatio定位到的城市是拼音的，我们需要的是中文的，就需要转...
2019-12-30 15:56:40
3280
1
原创 webpack搭建一个项目
1，安装与基本命令npm install webpack-cli -g2，3，4，热替换因为我们搭建的工程化项目不是自动化的，修改一行代码必须编译，这是一件非常麻烦的一件事，我们需要自动化的编译的，这时候就需要启动服务，借助webpack-dev-server 插件5，webpack4.0npm install vue-cli -gvue init webpack 项目名 然...
2019-12-30 15:06:36
243
原创 webpack初体验
1，首先新建一个文件夹2，新建一个src3，新建4个js app.js是文件入口4,a.js/b.js/c.js5,app.js6,src里新建一个index.html 引入app.js ，运行会发现出错，因为import浏览器不认识，这是引入模块化，这时候需要借助webpack，新加一个webpack.config.js这里是exports不是export7，...
2019-12-26 16:37:30
90
原创 使用uniapp做海报的坑
使用uniapp做海报有两种方法1，使用canvas（uniapp官网有插件，可以根据仿照例子做一个）2，使用HTML2canvas（不过使用这个需要获取dom节点，因为小程序是没有dom节点这一说法的，所以当时没想到好的解决办法，就用了第一种）canvas我也仅仅只是了解，没有真正做过什么东西，这是我第一次使用这个做一个完整的页面（海报链接地址）我用的是这个插件，首先请求海报上需要的数...
2019-12-16 11:56:56
1528
原创 弹出层一些注意点
注意点一在写弹出层动画时一定要注意 none和block之间的切换（可能不一定是这个，其他的只要产生出现和没有出现都是这种情况）在写动画的时候一定要延迟，不延迟的话就没有动画的过渡注意点二在弹出层出现之后底下的页面不要滚动时在整个页面的css加 height:100vh;overflow:hidden;...
2019-11-06 16:45:03
100
原创 数组扁平化
已知如下数组：var arr = [ [1, 2, 2], [3, 4, 5, 5], [6, 7, 8, 9, [11, 12, [12, 13, [14] ] ] ], 10];编写一个程序将数组扁平化去并除其中重复部分数据，最终得到一个升序且不重复的数组第一种方法Array.from(new Set(arr.flat(Infinity))).sort((a,b)=>{ retu...
2019-11-05 10:05:55
132
原创 python学习之路一
安装requests安装这个模块花了很长时间，因为一开始一直在报错，我总结了一下我报错的点：首先看你安装了几个版本 python --version看你cmd中运行python打开的是哪个版本，这个真的很重要，不然可能一直安装不到你想要的版本爬取京东上的网页爬取亚马逊上一个网页爬取百度上搜索关键词爬取图片d盘下的abc.jpg就是你需要爬取的图片ip地址归属地自动查...
2019-11-04 11:59:25
172
原创 nodejs简单的爬虫
爬虫：代替浏览器去做一个自动访问的程序思路：首先建一个空的文件夹，在里面创建app.js在命令行里面运行 npm install --save cheerio找到需要爬虫的网址http://sports.sina.com.cn/nba/1.shtml//引入标准http模块var http = require('http');var cheerio = require('chee...
2019-10-29 09:16:42
117
原创 leetcode电话号码的字母组合
给定一个仅包含数字 2-9 的字符串，返回所有它能表示的字母组合。给出数字到字母的映射如下（与电话按键相同）。注意 1 不对应任何字母。示例:输入：“23”输出：[“ad”, “ae”, “af”, “bd”, “be”, “bf”, “cd”, “ce”, “cf”].思路：首先要将数字对应的字母用一个数组存起来，这个定义是很重要的，决定着后续代码的复杂度将传递过来的数字找到对...
2019-10-28 15:36:47
153
原创 前端中适配各种手机模式的一种解决办法
在前端开发中因为有时候需要适配手机而头痛，之前我的解决办法都是media和js一起来适配，但是会写好多好多代码，今天在群里看到有个人发的解决办法很好，我就发出来分享一波<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" ...
2019-10-24 14:20:31
1851
原创 前端上传excel文件并读取文件里的数据
1，纯js实现文件的上传读取数据并展示github 可以下载文件本地运行演示地址读取本地文件$(function() { document.getElementById('file').addEventListener('change', function(e) { var files = e.target.files; console.log(files) if...
2019-10-24 11:54:22
6351
1
原创 你必须知道的图片压缩
1，为啥要压缩图片可能我们最平常的操作图片就是从ui设计师那儿拿到图片展示出来就行，除非图片特别大我们才会压缩一下，但是有时候压缩会降低品质，就在这里推荐几个比较好用的处理图片的办法2，imagemin-pngquant（imagemin-pngquant）npm install imagemin-pngquant在webpack里面配置 import ImageminPlugin ...
2019-10-22 14:00:30
631
原创 写网站的一些技巧（一站式开发的原理）
<style> * { margin: 0; padding: 0; } ul li { float: left; margin-left: 40px; } div { dis...
2019-09-27 15:22:48
216
原创 js实现无重复字符的最长字串
思路：1，先把字符串分割分字符数组str，新建两个数组obj,list，一个变量max2，循环str，没有重复的存取到obj中，max实时存取obj的长度，list拷贝没有重复字符之前的obj3，当有重复字符时，将obj置空，再将当前字符存取到obj中，这时候需要考虑一个重要的东西，就是list里面的，因为list里面有没有重复字符的那一部分，也需要存取到obj的前面（我一开始就没考虑到li...
2019-09-23 17:32:18
844
1
原创 js算法题
1.xiaoshuo-ss-sfff-fe 变为驼峰xiaoshuoSsSfffFe普通方法：1，先用split将字符串分割开2，将分割开字符串的第一位字符大写，在加上原分隔开字符串去掉第一位字符（slice）splice/split/slice方法可看我其他博客，有特地写到function getCamelCase(str) { let str1 = str.spli...
2019-09-20 18:23:41
216
原创 js中split()方法、splice()方法、slice()方法
split()方法split()方法是将一个字符串分割成字符数组stringObject.split(separator,howmany)separator 是字符串或正则表达式，从该参数指定的地方分割 stringObject。howmany 该参数可指定返回的数组的最大长度这个得到的结果是一个数组splice()方法splice() 方法向/从数组中添加/删除项目，然后返回...
2019-09-20 16:54:55
2139
原创 css中动画和display踩过的坑
动画的过渡效果一遇到display就没有效果，是因为：display:none的时候，页面文档流中将不会存在该元素，display:block的时候，文档流中才存在该元素。transition属性无法对一个从无到有的元素进行过渡显示。所以display做不了过渡效果，但是可以有其他的办法做过渡效果解决办法:1，依然用display，但是在js中加setTimeout延迟一下2，用opac...
2019-09-18 11:12:40
1688
原创 各种滚动
1，指定元素的出现位置// start出现在视口顶部、center出现在视口中央、end出现在视口底部document.querySelector(".box").scrollIntoView({ block: "start" || "center" || "end"});2，设置滚动具有平滑的过渡效果window.scrollTo({ behavior: "smooth"...
2019-09-17 14:58:11
369
原创 vue.js实现一键copy功能
1，首先建一个copyComm.js的文件const vCopy = { // 名字爱取啥取啥 /* bind 钩子函数，第一次绑定时调用，可以在这里做初始化设置 el: 作用的 dom 对象 value: 传给指令的值，也就是我们要 copy 的值 */ bind(el, { value }) { el.$value = value; // 用一个...
2019-09-16 16:16:40
5591
1
原创 创建一个函数来判断给定的表达式中的大括号是否闭合，返回 True/False，对于空字串，返回 True
思路：1，检查字符串，将左括号看成是一类，右括号看成一类2，左括号看成是入栈的信号，右括号看成是出栈的信号3，将左括号放在一个数组里面，如果有右括号就把左括号的数组删除一个元素4，直到左括号的元素没有，判断是true或false var expression = "{{}}{}{}" var expressionFalse = "{}{{}"; console.log...
2019-09-16 09:28:23
516
原创 原生js写星星
<style> *{ margin: 0; padding: 0; } ul li{ list-style: none; } ul{ margin: 100px 0 0 300px; ...
2019-09-11 13:42:34
167
原创 js中时间的总结
简单的时间 let time = new Date() console.log(time) //Wed Sep 11 2019 11:56:13 GMT+0800 (中国标准时间) console.log(time.toLocaleDateString()) //2019/9/11 console.log(time.toLocaleString()) //2019/...
2019-09-11 12:04:40
95
原创 懒加载
实现效果就是这样<style> *{ margin: 0; padding: 0; } ul{ border: 1px solid #000; width: 400px; margin: 0 auto; ...
2019-09-11 11:55:28
90
原创 原生js实现瀑布流布局
实现效果就是这样 <style> *{ margin: 0; padding: 0; } .item{ text-align: center; font-size: 18px; position: absolut...
2019-09-11 11:52:42
122
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人