- 博客(42)
- 资源 (1)
- 收藏
- 关注
RSS订阅
原创 css3的渐进增强和优雅降级
原因不同的用户使用的浏览器版本不同，型号差异大，我们不可能让用户强制更新，所以就需要我们自己来兼容了，故而浏览器端就需要考虑到所谓的渐进增强和优雅降级了。渐进增强（progressive enhancement）：主要用户使用低版本浏览器的比较多，所以一开始针对低版本浏览器进行构建页面，完成了基本的功能。 然后针对高级浏览器进行效果、交互增强，功能追加等来达到更好的体验。.transiti...
2019-07-21 18:54:47
206
原创 如何将网站转化为桌面应用
如何将网站转化为桌面应用window+R cmd运行下载安装nativefiernpm install nativefier -g将网址打包成桌面应用nativefier "https://www.baidu.com"nativefier --name "novel" "https://www.baidu.com"4.然后在你所打包的地址下找到该打包应用，打开并点击里...
2019-06-19 21:39:54
1470
原创 如何让p标签里面的内容首行缩进
如何让p标签里面的内容首行缩进对于html来说，并没有特定的方式给p标签设置缩进，但是你可以在p标签里面加span标签，设置// cssspan{ padding-left: 30px;}当然，如果想要直接实行的话，给p标签设置如下样式// cssp{ text-indent: 30px;}...
2018-12-19 10:52:41
11230
原创 如何解决滑动listview的时候老是触发item的点击事件
滚动list-content时，会先后触发onTouchStart和onTouchEnd方法，若点击item那么应该在不是start的时候触发点击，滑动的时候onTouchEnd函数会在手指松开的时候触发，有一个过程，点击事件的时候onTouchEnd会快速触发，所以依照onTouchEnd有没有触发来判断是否为点击事件let scrollStatus=''; <div className='list-content' onTouchStart={() => {
2021-09-15 10:54:15
602
原创 img加载图片有时候显示只显示一半为什么
可能是没有设置图片大小，比如设置了height:0，给img设置宽高，解决！2.不想设置高度时，img设置clip:rect(100%,100%)，剪裁图片到对应大小，图片撑开就会完全显示出来了
2021-08-20 10:58:12
3677
原创 taro判断内容区域的文字是否超出父标签设置的宽度，文字宽度小于父标签的宽度隐藏下拉按钮
注意初始化阶段需要delay至少500ms再去调用，不然可能访问不到节点 setTimeout(() => { const query = Taro.createSelectorQuery() query.select(".toggle-open").boundingClientRect() query.select(".notice-world").boundingClientRect() query.select('.check-world-len
2021-06-24 19:00:53
369
原创 Lighthouse前端性能优化测试工具
安装访问：https://chrome.google.com/webstore/category/extensions?hl=zh-CN搜索lighthouse点击添加进扩展程序刷新页面F12调出控制台选择lighthouse并点击generate report允许等待生成报告
2021-06-10 10:43:54
140
原创 Taro实现用绝对路径引用文件
安装typescriptnpm install -g typescript新建tsconfig.json文件，文件中加入以下内容，路径配置在 path中{ "compilerOptions": { "paths": { "@/component/*": ["./src/component/*"], "@/utils/*": ["./src/utils/*"], "@/api": ["./src/api"], "@/asset/*":.
2021-06-02 16:48:09
1391
原创 兼容inphoneX底部刘海，苹果手机刘海遮挡底部问题
有时候，我们在使用苹果手机的时候新版手机底部都有一个横线的刘海，当按钮定位到底部的时候，往往会因为新版手机的刘海被遮挡，如图这时候给底部按钮的父元素加上如下代码 padding-bottom: constant(safe-area-inset-bottom); // 兼容 IOS<11.2/ padding-bottom: env(safe-area-inset-bottom); // 兼容 IOS>11.2/使用之后还可以用来兼容被底部遮挡的内容部分，根据手机型号的不同显
2021-05-27 12:13:47
733
原创 js正则判断是否输入emoji，并且删除已输入的emoji
haveEmoji = (str) => { var emojiReg = /[^\\u0000-\\uFFFF]/g const mm = emojiReg.test(str); if (mm) { Taro.showToast({ title: '不能输入emoji！', icon: 'none', duration: 2000, }) } const strResult = str..
2021-05-27 12:02:45
2209
原创 前端实现emoji表情的转码和解码
// 表情转码 function utf16toEntities(str) { const patt = /[\ud800-\udbff][\udc00-\udfff]/g; // 检测utf16字符正则 str = str.replace(patt, (char) => { let H; let L; let code; let s; if (char.length === 2)...
2021-05-12 15:42:09
2618
1
原创 如何兼容苹果手机inphoneX（底部横杠）
//html中添加<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no,viewport-fit=cover">在使用fixed的地方并且bottom=0的地方新增： padding-bottom: constant(safe-area-inset-bo
2021-04-26 16:00:38
243
原创 简单的倒计时
countDown = () => { const { placeOrderTime, interval } = this.state const startTime = placeOrderTime;//下单时的时间戳 const stopTime = new Date().getTime()//当前时间时间戳 const cTime = stopTime - startTime //大于15分钟之后设置订单状态为失效 if (cTime >.
2021-04-25 16:42:10
83
原创 taro微信小程序运行报错[ app.json 文件内容错误] app.json: app.json 未找到
是由于根目录下的project.config.json文件中的“miniprogramRoot”未找到app.json所导致的,改成如下路径 "miniprogramRoot": "./dist/weapp",若还是出错，直接修改dist路径下的project.config.json，添加"miniprogramRoot": "./weapp",...
2021-03-12 17:48:08
26166
1
原创 typescript基础学习
基本类型（小写哦）booleannumberstringnullundefinedobject数组(1) let arr : number[] : [1,2,3];(2) let arr Array<number> = [1,2,3];元组let x: [string, number];x = ['hello', 10];枚举enumenum Color { Red = '傻妞', Green = '美女', Blue = '小可爱' };let
2020-12-01 18:56:00
91
原创 react creact-react-app 构建完项目后,npm start启动失败怎么解决
详情在此：https://blog.csdn.net/zhuhui2000/article/details/90612736
2020-10-30 16:28:52
633
原创 git从创建到合并分支的过程总结
git如何新建分支切换到基础分支，如主干git checkout master创建并切换到新分支git checkout -b pandagit branch可以看到已经在panda分支上更新分支代码并提交git add *git commit -m "init panda"git push origin panda在git代码管理界面经可以看到panda分支了，成功~~...
2020-10-26 14:19:36
145
原创 如何判断项目是在浏览器还是在手机端运行
function IsPC() { var userAgentInfo = navigator.userAgent; console.log(userAgentInfo); var Agents = ["Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod"]; var flag = true; for (var v = 0; v < Ag...
2020-09-28 15:58:29
322
原创 react中用react-photo-view实现点击图片，图片放大可移动拉拽的效果
下载插件yarn add react-photo-view引入插件及样式import { PhotoProvider, PhotoSlider } from 'react-photo-view';import 'react-photo-view/dist/index.css';使用插件 <div className="img" onClick={() => setFlag(true)}> <PhotoProvider> .
2020-09-24 16:26:46
4108
原创 简单节流防抖函数
export default (func, threshold = 500, immediate = false) => { if (typeof func !== 'function') { throw new Error('First argument of debounce function should be a function'); } let timer = null; return function debounced(...args) { const
2020-08-31 17:47:06
174
转载 npm install 报错（npm ERR! errno -4048，Error: EPERM: operation not permitted,）解决方法
已解决文的错误转载https://blog.csdn.net/qq_35624642/article/details/78393035?utm_source=blogxgwz7
2020-06-26 18:37:46
2017
原创 写react项目的时候遇见的一些安装配置的问题
antd在React项目中按需加载：https://blog.csdn.net/weixin_33885676/article/details/91379768在react中配置less:https://www.cnblogs.com/jayxiangnan/p/9116663.html
2020-02-04 22:22:00
120
原创 creact-react-app项目中暴露配置时出现问题的解决
详情：https://www.jianshu.com/p/19cdf46237d8
2020-01-10 11:03:28
485
原创 display属性之块级元素block，内联元素inline，内联块级元素inline-block的区别
1.block块级元素有address,div ,dl,form ,h1-h5,hr ,menu ,ol,p,pre,table,ul ,li单独占一行，可以设置width，height，maigin四个方向，padding四个方向；元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度；2.inlinea ,b ,br em,font ,i ,im...
2019-12-03 11:15:02
226
原创 React项目快速搭建之脚手架搭建
create-react-app是Facebook官方推出的脚手架，基本可以零配置搭建基于webpack的React开发环境* npm install -g create-react-app /*搭建一个全局的脚手架*/* create-react-app my-demo /*创建项目 my-demo是项目名字*/* cd my-demo /*进入目录 然后启动*/* npm start...
2019-11-22 16:19:00
198
原创 javascript实现数据结构算法
var arr = [2, 4, 1, 7, 5, 34, 7]; 冒泡 for (var i = 0; i < arr.length; i++) { for (var j = i + 1; j <= arr.length - 1; j++) { if (arr[i] > arr[j...
2019-10-16 14:24:16
130
原创 javascript的深度拷贝和浅拷贝
1.区别：浅拷贝会将值类型数据拷贝到目标对象，但是引用类型数据只拷贝其引用地址，也就是数据的存储地址。js值类型数据,引用类型数据2.浅拷贝 let target = { webName: 'yw' } let source = { url: 'ww.yw.com', num: {...
2019-10-16 10:11:26
109
原创 水平垂直居中方法
<div id="father"> <div id="son"> </div> </div>flex布局#father { width: 100px; height: 100px; display: flex; ...
2019-10-11 15:24:24
97
翻译 em和rem如何区分和使用
1.rem 单位如何转换为像素值当使用 rem 单位，他们转化为像素大小取决于页根元素的字体大小，即 html 元素的字体大小。 根元素字体大小乘以你 rem 值。例如，根元素的字体大小 16px，10rem 将等同于 160px，即 10 x 16 = 160em 单位如何转换为像素值当使用em单位时，像素值将是em值乘以使用em单位的元素的字体大小。例如，如果一个 div 有 18p...
2019-10-11 13:30:04
198
原创 vue项目用i18n实现多语言国际化
1.下载vue-i18n包npm install vue-i18n --savepackage.json会出现如下内容2.main.js引入vue-i18nimport VueI18n from 'vue-i18n'Vue.use(VueI18n)const i18n = new VueI18n({ locale: 'zh-CN', messages: { ...
2019-10-11 10:52:33
184
原创 vue如何获取url的参数
1.通过路由获取首先在路由中设置需要跳转的路径并且在后面用冒号分隔需要获取的和跳转的参数值再在组件中引入跳转的路径，注意 两处的路径应该完全一致然后用下面的语句获取参数值this.$route.params.shopId...
2019-10-06 18:28:50
6119
原创 Visual Studio安装配置教程
1.下载Visual Studio2.汉化VSCodehttps://blog.csdn.net/qq_31564379/article/details/827369103.VSCode上需要安装的插件https://blog.csdn.net/shunfa888/article/details/79606277
2019-09-25 13:55:24
839
原创 京东前端面试一二面内容分享
这一次是base北京的校招面试，两轮面试都是电话面试，面试官人很好，不会给人太紧张的感觉，两次面试都没有让我进行自我介绍，直接开面，一面的时候面试官人很好，因为我的项目没有上线，面试官可能想给我次机会就等我将代码部署到git之后来决定。特别感谢面试官给了我这次机会。再来说二面，开始的时候很紧张但是后来因为面试官小哥哥声音很好听很耐心就不紧张了。感觉面试的难度中等的，自己也找到了很多不足，面试官小哥...
2019-08-23 16:37:38
3261
1
原创 腾讯前端电话面，面经分享
自我介绍const,let与var的区别，const和let的区别es6用过哪些盒模型是什么，有哪些盒模型，（标准盒模型和怪异盒模型之间如何转换）vue中组件之间如何传值，父子组件之间传值和兄弟组件之间如何传值localStorage和sessionStorage之间的区别数组用过哪些方法，字符串用过哪些方法使用webpack做过什么？...
2019-08-15 13:43:15
304
原创 javascript如何遍历对象和数组，遍历方法总结
1.遍历对象的方法 var obj = { 'a': 1, "b": 2 , 'c': 3 }; //方法一 Object.keys(obj).forEach(function(key) { console.log(key, obj[key]); }); //方法二 for (var i i...
2019-08-05 18:47:55
194
原创 vue登录成功后如何跳转url,跳转页面
this.$ruter.push()解释：这个方法会向history添加一个记录，点击后退会返回到上一个页面使用方法：//字符串this.$ruter.push(’home');//对象this.$ruter.push({path:’home'});//命名的路由this.$ruter.push({name:'user'});//带参数 /regisetr?role=user...
2019-08-05 13:25:31
14778
3
原创 css预处理器less,sass,stylus
什么是 CSS 预处理？为什么要有 CSS 预处理？可以实现css变量和函数的功能 ，给我们带来动态语言所具有的优势。less1. less文件必须以.less结尾2. 定义变量：@字符开头@bgColor:#000;//定义变量//编译前less.content{ background:@bgColor;}//编译后.content{ background:#000;...
2019-07-28 16:05:01
200
原创 js的函数调用this指向问题
js的函数调用1.作为函数方法调用函数在 JavaScript 中, 函数是对象。JavaScript 函数有它的属性和方法。call() 和 apply() 是预定义的函数方法。 两个方法可用于调用函数，两个方法的第一个参数必须是对象本身。this指向函数的本身function myFunction(a, b) { console.log(a*b); } ...
2019-07-21 18:19:33
430
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人