- 博客(136)
- 收藏
- 关注
RSS订阅原创 vantUI 2.x 版本，picker组件支持特殊索引的数据（非纯数组）
【代码】vantUI 2.x 版本，picker组件支持特殊索引的数据（非纯数组）
2023-06-14 11:25:10
281
原创 ES10 中的 Object.fromEntries() 妙用
当我们在操作对象 key或value的时候，有如下表的方法Object.keys()生成一个对象key的数组Object.values()生成一个对象value的数组Object.entries()生成一个对象 key和value的二维数组Object.fromEntries()将 Object.entries()生成的二维数组专成对象这里我们重点讲一下 ES10 新提出的 Object.fromEntries()这个方法。首先是Object.entries(
2022-03-04 12:00:32
552
2
原创 当h5页面横向不能滚动，如何优雅的显示表格数据
背景h5项目中经常会出现“使用协议/隐私政策”。这些内容一般都是服务端给返回的富文本。问题一般协议中难免会出现表格等形式展示更多的信息。但是对于产品人员或者法务人员给我们的富文本展示出来的表格。已经远远的超出了页面内容的宽度。处理方式如果前端人员为了完全的展示表格，要么允许横向滚动，要不自己处理富文本中table标签。方案一：页面允许横向滚动，虽然表格可以展示完全，但是页面会显得特别“宽松”，因为除表格外的内容是和页面一样宽的。方案二：我们可以针对table标签进行处理，处理成table宽度和
2021-12-01 11:18:40
1376
原创 解决 react h5移动端项目 fastclick点击多次才生效的问题
项目背景react框架编写的移动端h5项目项目中引用了fastclick.js使用 input type=“file” 用户上传头像faskclick实现原理fastclick是通过在touchstart里记录触摸点信息，在touchend里判断此次触摸是否是个有效的click点击，如果是，则在touchend里阻止默认事件以防止产生原生click事件（因为会有 300ms 的延迟），并立即生成并触发自定义的click事件（没有延迟）300ms产生的原理时间要追溯到 2007 年初代 iPh
2021-11-14 21:32:59
1834
原创 JS中不使用toLowerCase()/toUpperCase()方法的情况下，讲字母转成小写/大写？
例如：将‘HELLO WORLD’转成‘hello world’。方法一、根据字典项循环匹配（较笨）let str = 'HELLO WORLD';// 转小写let dic = { 'A': 'a', 'B': 'b', 'C': 'c', 'D': 'd', 'E': 'e', 'F': 'f', 'G': 'g', 'H': 'h', 'I': 'i', 'J': 'j', 'K': 'k', 'L': 'l', 'M': 'm', 'N': 'n', 'O':
2021-10-27 16:52:20
268
原创 react中操作dom
当我们在react中需要做一些dom操作时，就会使用到react给我们预留的“后门”。之所以称之为“后门”，是因为当前流行框架react/vue出现的目的就是避免操作dom，造成渲染浪费。然而很多时候不能不操作dom。1、通过React.createRef()/useRef();来创建一个ref变量。// 类组件中constructor (props) { super(props); this.myRef = React.createRef();}// 函数组件中（使用hooks
2021-10-26 14:47:47
3792
原创 小程序图片高度自适应
页面需要显示长图片（超过一屏），本来以为像以前一样给其父级的盒子不给高度就行了，结果并不是想象中的那样，根本不起作用！！！这是一个坑，关键在于image标签的一个属性：mode=“widthFix”原来的写法<view class="header-panel"> <image src="../../image/header-img.jpeg" class="header" mode="widthFix"></image></view>.heade
2021-06-21 12:52:43
1356
原创 你知道我们常说的“向前兼容”和“向后兼容”都是什么意思吗？
背景：今儿组内随便聊天，说到代码的“向前兼容”和“向后兼容”。开始聊得都很嗨皮，可是越到后来我聊得和他们说的越是大相径庭。真应了那句话了：“你以为你以为的就是你以为的吗？！”。我以为说的“向前兼容”就是向以前的老版本兼容，后“向后兼容”则是为以后代码扩展提前做好铺垫。然而，恰恰相反。正文：后来从度娘、某乎哪里才得知：在软件开发行业中的“前/后”是按照英语的习惯来的，并不是按照咱们汉语习惯来的。（计算机都是人家发明的，手动摊手，无可奈何）英语中“向前”(forward)指未来，“向后”(backward
2021-04-29 22:09:16
1249
4
原创 处理软键盘弹出问题
let isReset = false;document.body.addEventListener('focusin', () => { // 软键盘弹出的事件处理 window.document.body.style.position = 'fixed'; isReset = false;});document.body.addEventListener('focusout', () => { isReset = true; setTimeout(() =>
2021-04-25 17:38:27
192
原创 获取当前时间距离目标时间的年月
// 月份不足十位的补零function complementZero(num) { if (num >0 && num < 10) { return `0${num}` } else if (num >= 10 && num <= 12) { return `${num}`; }}// 获取当前时间距离目标时间的年月function getYearAndMonthOfMinus (ta
2021-04-07 11:59:59
220
原创 通用的事件侦听器函数
鉴于IE浏览器与普通浏览器在dom事件上的区别，特此封装一个事件监听函数来兼容彼此之间的却别。const EventUtils = { // 视能力分别使用dom0||dom2||IE方式 来绑定事件 // 添加事件 addEvent: function(element, type, handler) { if (element.addEventListener) { element.addEventListener(type, handler, false); }
2021-03-17 19:58:37
202
原创 小数点左边的整数每三位添加一个逗号，如 10000.9 转为10,000.9
// 方法一：function format(number) { return number && number.replace(/(?!^)(?=(\d{3})+\.)/g, ",");}// 方法二：function format2(number) { return number.toLocaleString('en');}
2021-03-17 18:21:43
260
原创 MISCONF Redis is configured to save RDB snapshots, but it is currently not able to persist on disk.
redis 报错MISCONF Redis is configured to save RDB snapshots, but it is currently not able to persist on disk. Commands that may modify the data set are disabled, because this instance is configured to report errors during writes if RDB snapshotting fails (s
2021-03-17 09:55:35
148
1
原创 mac下出现xcrun: error导致git、svn无法使用的解决办法
xcode-select --installmac下出现xcrun: error导致git、svn无法使用的解决办法
2021-03-12 16:41:33
144
原创 Mac 全局安装node-sass
SASS_BINARY_SITE=https://npm.taobao.org/mirrors/node-sass/ npm install node-sass
2021-03-05 20:24:21
1744
原创 微信小程序中实现类似VUE中的过滤器
微信提供了WXS文件，其中可以使用模块，即使用module.exports导出。例如我们将后端同学返回的时间戳在前端展示成yyyy-MM-dd的格式，需要在utils文件中新建formatDate.wxs文件。注：wxs文件中不支持ES6+语法formatDate.wxs// 过滤方法function formatDate(date) { var date = getDate(date); return date.getFullYear() + '-' + date.getMonth() +
2021-02-23 18:31:37
304
1
原创 微信小程序两种loading加载中显示方式
在微信开发中，为了用户更加友好的体验，一般在数据请求的时候就显示动态加载中的显示字样，表示数据正在加载，用户请耐心等待。一般有两种显示方式（其实是三种，showToast和showLoading写法类似）。No.1正常显示在页面中间的加载中// 显示wx.showLoading({ title: '加载中',});// 隐藏wx.hideLoading();// 也可以使用Toast方式// 显示wx.showToast({ title: '成功', icon: 'su
2021-02-22 16:20:55
6975
3
原创 node中使用nodemailer模块通过邮件发情（sao）话
引用自如何用js给老婆每天发情话本来想随便玩玩，结果发现博主写的有点儿问题。就自己写了并更正了直接上代码：const nodemailer = require('nodemailer');const {default: Axios} = require('axios');const schedule = require('node-schedule');// const app = new Koa();// response// app.use(async ctx => {//
2021-01-15 17:09:31
162
原创 当我们vue使用Bus的时候，记得要使用$off清除
// a 组件created () { Bus.$on('refreshGroupList', () => { // 这是一个bus的订阅自定义事件 });},beforeDestroy () { // 在组件销毁之前清除自定义事件 Bus.$off('refreshGroupList');}// b 组件 在事件中触发自定义事件Bus.$on('refreshGroupList');之所以清除bus的自定义事件，是因为bus的自定义事件是基于“发布订阅”模式的。
2021-01-12 17:33:27
5070
2
原创 今年最后一天，记录2020年
背景：2020年已经走到了“尽头”，还有3个多小时就到了2021年了，这一年时间过得真到挺快的，也如愿以偿的换了工作，换了新的工作环境。这一年经历了太多，如果用一个字来形容今年，那就是“难”。从病毒爆发到全民居家抗疫；从无可事事到远程办公；从回京隔离到去公司的全面防护工作。这一切现在回想起来是那么的熟悉，那么的历历在目。时间轴：1月感受疫情的爆发及快速传播2月-3月居家抗疫，响应国家号召，“不出家门半步”；远程办公，助理荆门、黄冈的疫情上报等工作。3月-4月返程回京，居家隔离；回公司
2020-12-31 21:06:15
157
原创 js判断是否为空对象
思路就是采用for in 循环。function isEmptyObject (obj) { for (const nameKey in obj) { return false; } return true;}let obj1 = {};let obj2 = { name: 'cherry'}console.log(isEmptyObject(obj1)); // trueconsole.log(isEmptyObject(obj2)); //
2020-12-24 20:33:25
114
1
原创 element-UI中使用树组件el-tree实现左侧勾选右侧列表展示并且列表删除某一项左侧树菜单取消相应勾选
当我勾选树状菜单的父级节点的时候，右侧展示对应的子节点。意思就是只要子节点中包含children属性就不展示，说明不是最终的子节点。如下图所示。右侧只展示了最终的子节点而没有展示一级和二级节点。1、勾选的时候右侧列表会展示勾选的最终的子节点。2、点击删除列表中某一项，就会对应的取消树状菜单的勾选状态。3、支持搜索过滤。<template lang="pug"> ul.dialog-body-content //- 搜索、树状列表 li e
2020-11-26 13:42:18
6307
原创 对数组中每个对象对某个值进行求和
当我们在进行一些求和操作的时候就会使用数组的reduce方法。let total = 0;let array = [1, 2, 3, 4, 5];total = array.reduce((prev, next) => { return prev + next;}, 0);console.log(total);例如我们数组里面是几个商品的价格，怎么去求商品总价呢开始我是这么处理的，代码如下let totalPrice = 0;let goodsList = [ { pric
2020-10-31 19:24:37
5061
3
原创 git在切换分支的时候，管理暂存本地修改的代码
当我们在使用git进行团队协作开发的时候，会有多个开发分支。例如：master、dev、feature等等分支。例如：当我们在feature分支进行开发的时候。然后想切换到master分支看一下这部分业务逻辑怎么处理的，运行看看效果，但是我们已经在feature分支做了修改，因为业务没有写完不能直接commit。。。所以git stash 就派上用场了例如我们在feature分支做了修改。在切换分支的先进行“暂存”。git branch // 查看当前分支git stash // 将本地改动暂
2020-08-29 19:29:43
3685
原创 鼠标移入暂停animation动画与清除动画
我们可以利用鼠标的hover伪类实现动画的暂停div:hover { animation-play-state:paused;}animation-play-state 的默认值是 runningW3C animation动画暂停顺便说一下animation清除动画div:hover { animation-duration: 0s;}W3C animation动画有介绍...
2020-07-10 18:26:27
4699
原创 uni-app的swipeAction滑动操作在安卓上不起作用
苦恼了好久，滑动操作总是不生效。结果找到了uView这个框架。一款专门为uni-app而生的UI框架。在uni-app的插件市场可找到。真的很好用，大赞！我在这为作者做一波广告吧。
2020-06-18 19:19:57
3305
3
原创 H5版基于uni-app实现自定义底部tabbar效果（支持底部图标选中时的渐变效果）
首先声明部分代码转载自 uniapp自定义tabbar导航解析我自己又在基础上添加了一些功能，如实现tab的数字角标、tab页面跳转、tabbar选中状态的图标高亮渐变。tabbar已经抽离成组件了
2020-05-31 01:03:10
3839
原创 js 实现深拷贝 保留继承关系 可以实现各种类型的拷贝及实现递归拷贝
function deepClone(obj) { if (typeof obj !== 'object') return Object; if (obj === null) return null; if (obj instanceof Date) return new Date(obj); if (obj instanceof RegExp) return ne...
2020-04-20 22:23:18
354
1
原创 Ubuntu下搭建Nignx环境及卸载环境
搭建环境```sh1、安装先决条件（Mac需要加sudo）apt install curl gnupg2 ca-certificates lsb-release2、设置稳定版本nginx的apt仓库echo "deb http://nginx.org/packages/ubuntu `lsb_release -cs` nginx" \ | sudo tee /etc/apt/sourc...
2020-03-31 22:50:35
222
原创 “新冠病毒”下的“远程办公”及返城后的自我隔离
2020年的新年伊始，从1月31号晚上8点接到罗总的电话，说“XX市疫情防控”需要前端人员紧急协助处理一下。当时特地问我带电脑没，我毫不犹豫的说带了，可以远程协助。就这样，工作就在紧张而又激动中展开了。接下来，就是连着两个通宵加一个白天，顺顺利利、票漂亮亮的完成了领导交代的任务。2月3号开始，开始参与部门的研发，全力以赴的协助“XX市疫情防控中心”完成居民疫情排查、疫情排查上报等功能。（目的是...
2020-02-29 19:37:18
661
原创 js获取当日凌晨0:00:00与当日23:59:59
1、获取当日凌晨0:00:00（零时整）控制台效果如下：代码如下：new Date().toLocaleDateString()"2020/2/9"new Date(new Date().toLocaleDateString()).getTime()1581177600000new Date(new Date(new Date().toLocaleDateString()).get...
2020-02-09 22:21:46
2215
原创 js实现侧边栏拖动宽度伸缩
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>可拖拽侧边栏</title> <style type="text/css"> .container { position: absolute;...
2019-12-31 16:00:05
1948
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人