- 博客(35)
- 收藏
- 关注
RSS订阅原创 react上拉加载更多
react-waypoint参考：react-waypoint备选方案：react-intersection-observer该库主要用于埋点曝光上报，在使用react-waypoint受阻时，可以考虑使用。根据元素的可见行来判断是否触发加载更多。参考：react-intersection-observerIntersection Observer API注意： 使用时，会在iOS12.0及以下系统版本会报错，intersection-observer资源加载失败，需要.
2021-06-07 15:14:32
515
原创 node版本管理工具——nvm
nvm可以很好的切换node版本，对于一些需要打开权限的命令可以不用再使用sudo，直接执行命令即可。安装nvmcurl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.36.0/install.sh | bash执行命令后会克隆nvm的仓库到本地~/.nvm目录，命令执行完成后，需查看本地有没有.nvm的文件，如果没有需要手动新建一个，再执行安装命令查看文件快捷键：command + 空格 输入~/.nvm没有时的..
2021-02-25 18:25:11
221
原创 swiper高度自适应问题
swiper高度自适应问题一、问题原因 swiper内每项的列表数据是不固定的，当一个swiper-slide内容过多将swiper高度撑大，因swiper是一个切换内容显示的容器，容器会按照最大的高度展示，导致数据量少的swiper-slide项依然可以向下滑动。（尝试使用swiper的autoHeight：true，swiper的初始化高度默认读取swiper-slide的offsetHeight，代码中实际获取的offsetHeight为一个item的高度，导致显示有误）...
2021-01-21 20:37:33
5560
原创 react动态添加样式：className和style
开发过程中，标签或者组件元素需要动态绑定className和style，比较常见的场景。1、动态添加classNameReact中动态添加className，有两种情况：本身存在一个class还需要动态绑定class 只需要动态绑定class，去其他样式第一种情况，div标签本身有class，另外需动态添加一个.show的className，来判断是否显示内容：// 两种写法<div className={['container', this.state.isShow ? 's
2020-07-30 12:14:34
1869
原创 Terminal终端（windows：cmd）通过域名查询服务IP的方法
Terminal通过域名查询服务IP的方法主要有两种：第一种：使用ping 域名，如图：第二种：使用nslookup，如图：
2020-06-24 10:37:04
1794
原创 Node版本管理 n
安装npm install -g n安装完成后，输入n输入n回车后，会输出当前已经安装的node版本，通过电脑的上下键选择使用版本，回车即可。 n //回车 //输出node版本 node/8.1.0 node/8.1.2 node/8.12.0 node/10.8.0 ο node/10.16.0 node/12.13.1 node/12.16.1安装指定node版本n 10.16.1安装最新版本
2020-05-25 12:12:03
1594
翻译 mac使用Chrome模拟微信内置浏览器
1、打开Chrome，右键检查（F12）打开开发者工具，操作步骤：菜单==》More Tools==》Network condition打开配置窗口，如图所示：2、User agent默认选中Select automatically，取消默认选中，选择Custom（自定义），在下面输入框中输入Android或IOS的微信user agent（用户代理，简写卫UA）即可。Android和IOS的user agent如下：Android微信UA：mozilla/5.0(linux;u;an...
2020-05-21 19:29:24
1869
原创 mac使用Charles相关配置
目前，主要使用Charles的抓包功能和设置本地代理，满足本地开发时访问Https。安装Charles1、Chrome无法抓包问题对Chrome做相关的配置即可，流程如下：复制chrome://flags/#allow-insecure-localhost 到Chrome，将状态改为Enabled。参考：Localhost SSL traffic fails with ERR_CONNECTION_CLOSED in Chrome2、设置代理后，https无法访问本地服务配置系.
2020-05-08 20:27:08
574
原创 Git代码库迁移命令
第一步：git clone --mirror 旧仓库地址 （在本地会有一个.git文件夹）第二步：cd xxx.git第三步：git上新建仓库第四步：git remote set-url --push origin 新仓库地址第五步：git push --mirror...
2020-04-27 17:16:29
212
原创 Vue使用Cascader级联选择器数据回显中的坑
业务场景由于项目需求，需要对相关类目进行多选，类目数据量又特别大，业务逻辑是使用懒加载方式加载各级类目数据，编辑时回显用户选择的类目。问题描述使用Cascader级联选择器过程中主要存在的应用问题如下：1、由于在未渲染节点数据的情况下编辑时无法找到对应的类目数据导致无法回显，如何自动全部加载已选择类目的相关节点数据；2、提前加载数据后，点击相应父级节点出现数据重复等；3、使...
2020-04-25 18:06:44
10158
9
原创 Vue开发中问题总结
1、a标签使用问题动态配置a标签的href，生产环境会出现跳转报错404，由于动态url自动加上域名导致，因此需要手动补全url即可。<a :href="getURL(url)" target="_blank" rel="noopener noreferrer">{{url}}</a>...getURL(url){ let strURL = "";...
2019-11-04 10:44:51
229
原创 前端开发学习源汇总
前端开发学习前端开发博客ionic4+vue+cordova开发混合应用一个非主流但非常实用的UI仓库开发框架Vue.jsReact中文AngularweexWeex Uidcloud从Android到React Native开发（一、入门）Flutter中文网uni-appIonicCordova中文网后台管理系统项目手摸手，带...
2019-09-22 00:10:18
238
原创 前端开发工程师——面试题总结
一、CSS部分1、W3C标准盒模型W3C标准盒模型2、垂直水平居中多种css布局实现3、flex布局Flex 布局教程：语法篇Flex 布局教程：实例篇4、position的几种属性值static:默认位置。 在一般情况下，我们不需要特别的去声明它，但有时候遇到继承的情况，我们不愿意见到元素所继承的属性影响本身，从而可以用Position:static取消继承，...
2019-09-22 00:06:14
3355
2
翻译 滚动穿透问题的解决方案
滚动穿透问题体现在移动端弹出层滑动时，导致弹框下面页面的滚动。方案一：使用preventDefault阻止浏览器默认事件：var modal = document.getElementById('modalBox');modal.addEventListener('touchmove', function(e) { e.preventDefault();}, fals...
2019-07-20 11:28:26
1238
原创 Promise和Async的相关用法
Promise：Promise最大的好处是在异步执行的流程中，把执行代码和处理结果的代码清晰地分离了：串行执行三个promise对象，job1.then(job2).then(job3).catch(handleError);除了串行执行若干异步任务外，Promise还可以并行执行异步任务，all 、race。1.Pomise.all的使用Promise.all可以将...
2019-07-05 14:49:24
320
转载 如何写出漂亮的 JavaScript 代码
原文：https://github.com/ryanmcdermott/clean-code-javascript如何提高代码的可读性、复用性、扩展性。我们将从以下四个方面讨论：变量 函数 类 异步一、变量用有意义且常用的单词命名// Bad:const yyyymmdstr = moment().format('YYYY/MM/DD');// Good:const...
2019-06-25 15:56:05
168
原创 JavaScript数据类型的几种判断方法
JS数据类型的判断主要有三种方法：typeof、instanceof、Object.prototype.toString.call()1、typeof返回一个表示数据类型的字符串，返回结果包括：number、boolean、string、symbol、object、undefined、function等7种数据类型，但不能判断null、array等typeof Symbol(); /...
2019-06-14 16:00:58
4241
1
原创 JS之函数防抖与节流
1、函数防抖原理：函数执行过一次后，在等待时间段内不能再次执行。 在等待时间内触发此函数，则重新计算等待时间。代码实现 /* *fn:要防抖的函数 *wait:要等待的时间 *immediate:是否立刻执行fn函数 */ function debounce(fn,wait,immediate){ let timer=nu...
2019-06-13 10:58:14
155
原创 Vue组件间通信的几种方式
vue通信方式有很多，项目中用的比较多的的有pros、vuex、$emit/$on这3种，还有provide/inject(适合高阶组件)、$attrs和$listeners(适合高阶组件)以及$parent/$child/ref、eventBus等这3种方式。1、pros父子组件通信vue使用props有两种形式形式实现父子组件之间的数据传递。官方描述：props// 第一种方式...
2019-06-12 12:38:53
261
原创 better-scroll解决ios在微信浏览器中的弹性布局
什么是 better-scroll？better-scroll是一个移动端滚动的解决方案，它是基于 iscroll 的重写。better-scroll 也很强大，不仅可以做普通的滚动列表，还可以做轮播图、picker 等等。使用better-scroll解决微信浏览器在ios系统中，页面布局错乱，软键盘弹出导致底部tab上移等问题。数据动态更新better-scroll结合vue...
2019-05-16 14:10:54
736
原创 Mpvue弹框改变页面数据，如何进行页面局部数据刷新?
在我们使用vue进行开发的过程中，可能会遇到一种情况：当生成vue实例后，当再次给数据赋值时，有时候并不会自动更新到视图上去；当我们去看vue文档的时候，会发现有这么一句话：如果在实例创建之后添加新的属性到实例上，它不会触发视图更新。html代码：<div> <span class="price"> {{ newSkuItem.price ...
2019-03-27 09:40:44
1730
原创 Mpvue禁止蒙层下页面的滚动
html部分界面：<div v-show="couponResultShow" @touchmove="touchForbidden"></div>js部分的方法：touchForbidden(e) { e.preventDefault()}
2019-03-27 09:25:08
1229
原创 微信支付开发
微信支付开发 支付开发准备工作 微信公众号平台申请账号， 平台入口：http://mp.weixin.qq.com，申请微信服务号、小程序 微信商户账号，平台入口：http://pay.weixin.qq.com，通过公众号中”微信支付”,申请商户账号 公众号或小程序,开放平台绑定支付，商户平台授权，目前仅支持绑定...
2019-01-30 10:18:36
423
原创 vue.js和angular双向数据绑定的实现原理
一、vue双向数据绑定1、原理数据劫持：vue.js 是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。2、实现步骤要实现mvvm的双向绑定，就必须要实现以下几点：实现一个数据监听器Observer，能够对数据对象的所有属性进行监听，如有变...
2018-12-05 10:40:30
1642
2
原创 在vue中使用sass、less、stylus的配置方法
1、创建一个基于 webpack 模板的新项目vue init webpack myvue2、在当前目录下，安装依赖cd myvuenpm install3、安装css预编译的依赖包//sassnpm install --save-dev sass-loader//sass-loader依赖于node-sassnpm install --save-dev node...
2018-10-10 15:25:19
707
原创 Git（命令行）操作总结
git status ——查看本地是否有冲突文件和文件提交状态git add. ——新增文件git pull ——从git上拉取并自动merge，不允许pull的情况下使用git popStashgit commit -m '备注' ——代码提交git push ——代码上传git revert ——版本还原git log ——取hash...
2018-09-28 15:31:06
211
原创 阻止事件冒泡与默认行为
工作中使用到的前端框架该行为的总结：1. vuea.阻止事件冒泡<div id="box"> <div @click="show2()"> <input type="button" value="按钮" @click.stop="show()"> </div&g
2018-09-21 09:27:25
305
原创 Ionic实现透明状态栏，主要针对Android进行处理
第一步: 在platforms/android/src/../../MainActivity.java路径下MainActivity.java() 中的super.onCreate() 函数后添加如下代码并在MainActivity.java导入依赖包：if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) { getWi...
2018-09-17 11:05:06
904
原创 解决浏览器或移动端不支持小于12px的字体
字体大小<style> //方法一 .setSize{ font-size: 10px; transform: scale(0.7); display: inline-block; } //方法二 .setSize{ font-size: 22px; ...
2018-09-17 10:52:40
2616
原创 解决Chrome浏览器跨域问题
安装浏览器插件1.下载Allow-Control-Allow-Origin跨域扩展插件（附件中已给出）2.打开扩展程序界面,把下载的.crx文件拖进去就了3.启用该扩展插件即可 其他方法参照：https://www.jianshu.com/p/230b606e1ace...
2018-09-17 10:50:41
575
原创 ionic3项目实现在线预览PDF文件
这里参考了大牛提供的预览插件完成自己需要实现的功能，ng2-pdf-viewer，该插件不支持ionic3的懒加载，废话少说，直接撸代码。第一步，安装ng2-pdf-viewernpm install ng2-pdf-viewer --save第二步，在项目中新建页面ionic g page showpdf ionic3-cli 生成的page中含有.modul...
2018-09-13 17:08:36
4396
10
原创 ionic3项目监听Android物理键返回事件
针对ionic项目的两个模板分别处理。一、tabs模板项目的物理键返回事件处理机制import { Component, ViewChild } from '@angular/core';import {Platform, Nav, IonicApp, ToastController} from 'ionic-angular';import { StatusBar } from '@i...
2018-08-07 17:51:52
1866
原创 百度地图api遇到的问题
1.移动端点聚合下载百度地图提供的TextIconOverlay.js和TextIconOverlay_min.js文件。在TextIconOverlay.js文件中添加点击事件。T.event.on(this._domElement, "touchend", function(e){ g.dispatchEvent(eventExtend(e, new BaseEvent("onc...
2018-05-12 15:32:52
964
原创 JavaScript相关数据结构题目
第一题：实现一个整数n的阶乘function test(n){ if(n<0){ return -1; }else if(n==0 || n==1){ return 1; }else{ return n*test(n-1); }}第二题：删除一个数组中的重复元素function test(arr...
2018-05-05 15:24:15
293
原创 JavaScript异步和同步加载中setTimeout时间执行问题
setTimeout( function(){ alert("1");},5000)function A(){ //两种情况： //第一种，A函数是同步加载，加载数据需要10s //第二种，A函数是异步加载，加载数据需要10s}this.A();问:alert("1")什么时间执行？解答：JS是单线程执行，在存在同步请求时，先执行同步请求，同步请求执行完成后在执行setTimeout；在异步请求...
2018-05-05 13:09:24
1795
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人