- 博客(41)
- 资源 (2)
- 收藏
- 关注
RSS订阅
原创 js实现省市名称简称 ,echarts全国地图省市名称简称
事实上背景介绍:最近开发ecahrts全国地图时候,发现其只支持简称,比如北京市,只能用北京,新疆维吾尔族自治区,只能用新疆,不然效果就实现不了,显示异常(如下图),但是后端返回来的数据是全称,所以需要前端对数据进行处理,然后再去实现.解决方式我这里是通过js来对数据进行处理的,举个例子,后端返回的参数是这样的我们要把他处理成我们想要的“北京”,“新疆”…这种形式,解决代码如下 mounted() { this.getNewList() },methods方法:
2021-03-31 15:26:44
2025
原创 Module build failed: TypeError: this.getResolve is not a function at Object.loader 安装node-sass运行报错
vue安装node-sass编译报错安装node-scss报错安装node-scss报错在搭建vue脚手架 或者是在vue项目中，想使用sass的功能，npm install node-sass --save-dev //安装node-sass npm install sass-loader --save-dev //安装sass-loader npm install style...
2019-09-03 14:04:08
58151
53
原创 react hook的各种功能
react hook的各种功能React目前提供的Hookhook 用途useState 设置和改变state，代替原来的state和setStateuseEffect 代替原来的生命周期，componentDidMount，componentDidUpdate 和 componentWillUnmount 的合并版useLayoutEffect 与 useEffect 作用相同，但它会同步调用 effectuseMemo 控制组件更新条件，可根据状态变化控制方法执行,优化传值
2021-11-30 14:23:48
449
原创 支付宝小程序遇见的bug
最近写了一个比较长的form表单,支付宝小程序的,遇到一个bug在安卓端没什么问题,但是在iOS端发生了问题问题原因当textarea在下方时,输入内容 唤起的键盘会把内容订到上面去解决方法使用enableNative="{{false}}"进行处理 <textarea enableNative="{{false}}" class="text-height" value="{{zjyEnterRemark}}" placeholder="请输入" maxlengt
2021-10-22 15:46:53
766
原创 h5 在ios端常见bug
记录一些h5页面在ios端呢遇见的bugios上日期问题在ios上 日期不能识别 "2018- 09 - 09"这样格式的识别不了,所以需要转换一下 const data1 = '2018- 09 - 09' function clear(str) { str = str.replace(/-/g, "/");//取消字符串中出现的所有逗号 str = str.replace(/\s/g, "") //去掉字符串内出现的所有空格 return str; } con
2021-10-11 16:54:45
736
原创 小程序swiper轮播图跳转,返回时变成第一页
背景小程序里面经常有轮播图功能,有的还可以跳转内页.我一般使用小程序内置组件swiper实现这功能.如果想实现轮播图跳转其中内页,返回时变成第一页.实现思路通过swiper属性和方法实现实现代码 <swiper class="rotation" indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" current="{{s
2021-09-30 10:18:57
2654
原创 antd DatePicker 日期限制选择
function disabledDate(current) { // return current && current >= moment().endOf('day'); // 选择时间要大于等于当前天。若今天不能被选择，去掉等号即可。 // 限制为前后一周 return current < moment().subtract(7, 'days') || current >= moment().endOf('da...
2021-09-29 10:45:38
1211
原创 SyntaxError: Unexpected end of JSON input
小程序里面 SyntaxError: Unexpected end of JSON input报错怎么解决问题背景小程序,经常有跳转传参的功能,一般带一个id或者name,title之类很短的字段,但是如果带很多数据的话,很多人喜欢使用json转换,传一个对象过去小程序传参但这样仅限于不是很多的字段,不然就会出现如下图错误产生原因这是因为navigateTo方法携带的参数是有字符串长度限制的,超出部分就无法携带了,这就回导致传递过去的对象不闭合,产生报错.解决方法1、如果业务场景是从列表页面
2021-09-28 19:31:32
6903
原创 Vue结合element ui 实现图片上传可预览，可删除,以base64字符串上传到服务器
图片实现base64上传实现背景实现方式实现代码实现背景图片上传一般都是通过调用文件上传接口,返回图片地址,我们用拿到的图片地址进行相应操作,如表单提交等;但是最近有一个朋友遇到了一个问题,他们没有做图片管理,所以需要前端将图片转换为base64的形式进行上传. 将图片转化为base64,然后提交这个转换后的字符串.下面是实现方式实现方式通过element-ui 提供的upload方法进行上传,获取上传的file文件,进行转化,提交实现代码html代码 <div class="ma
2021-09-24 17:23:42
1968
转载 wxParse遇到的问题
小程序解析富文本碰到的问题 wxParse1、IOS端富文本滑动遇到的问题**问题:**在安卓端是正常,但是在ios端,出现了一段文字 分成了上下2层的问题 滑动上半段滚动,下半段滑动没问题.问题原因: 问题是富文本展示区域的滚动条跟整体页面的滚动条有一定冲突，导致滚动条不流畅；解决代码:wxParse.wxss中有如下代码view { word-break: break-all;overflow: auto;}修改为 :.detail view { word-break: b
2021-09-17 15:24:43
437
原创 fetch处理数据流下载
平时开发react项目,用的是fetch做的接口请求平时用的比较多的是json格式的,以为之前他们已经做过接口请求了,我没在意,这次做一个文件下载,和之前的不太一样,返回的数据流所以又重新看了一遍文档解决的平时使用 处理json数据返回fetch('http://example.com/movies.json') .then(function(response) { return response.json(); //处理json数据返回 }) .then(function(myJ
2021-05-29 15:15:40
1167
原创 动态实现选中取消功能
html <div className="main-style"> { mockData && mockData.length > 0 && mockData.map((item, index) => { return <div key={item.id} className={item.select ?
2021-05-28 15:40:11
160
原创 Uncaught ReferenceError: echarts is not defined
echarts引入失败Uncaught ReferenceError: echarts is not defined最近有个同事问我一个问题,用echarts写demo,发现引入echarts后报错,如图造成原因: 引入js的位置错误,echarts一定要在使用前引入 ,在option前一点导入即可.他在这个demo项目里面的错误，是因为先引入了自己写的js，再引入echarts，导致加载顺序不对，所以出现了echarts is not defined的情况.**解决办法:**只需要按照顺序引
2021-04-14 10:50:43
19304
3
原创 页面开发中css常见问题
1、display:flex;碰上white-space nowrap 影响布局的问题会导致页面宽度超出,造成横向滚动等问题,而且省略号也没有出来原因:设置了white-space:nowrap后,content不能收缩，所以给夫级宽度设置0后就有了固定尺寸,所以就可以收缩了.解决办法: 给其父div设置min-width:0;.parent-style{ min-width: 0;}...
2021-04-13 15:39:57
205
原创 HTML页面跳转并传递参数
背景:想实现一个通过跳转html文件,跳转的时候传递并参数,把用户信息带转过去的这么一个功能实现代码传递参数页面 let userInfo = { name:"小明", id:'001' } let url = './province.html?obj='+JSON.stringify(userInfo); //对参数进行json转化 window.location.href=url
2021-04-02 10:56:28
2559
1
原创 antd Input组件通过onChange事件获取输入内容时e.target.value为null
问题背景:使用antd组件,想写一个输入框,没有用form,仅使用antd里面中Input组件,结果使用onChange时,获取到内容为null解决方法:如下 //获取输入框内容 function inputChange(e) { dispatch({ type: 'TagManageModel/concat', payload: { inputValue: e || '' }, }); } <Input
2021-04-01 16:22:47
6586
2
原创 vue使用element的table表格prop的数据是数组的问题 formatter解决
一般我们在项目开发中使用的表格大多是ui组件库里面的,一般都是一个prop对应一个字符串,但有的时候产品设计需要一个字段下面展示很多的数据,这个时候得做处理了如下,要求一个表格里面展示很多的人名,后端返回的数据是数组形式的,这个时候需要前端做一下处理,比如给人名之间加一个逗号之类的我使用的是element table 里面的formatter 具体如下 <div style="width:50vw"> <el-table :data="tableData" styl
2021-03-29 14:43:15
5546
3
原创 js 相关日期的函数
获取年月日//获取年月日export function getNowFormatDate() { var date = new Date(); var seperator1 = "-"; var year = date.getFullYear(); var month = date.getMonth() + 1; var strDate = date.getDate(); if (month >= 1 && month <= 9) { mont
2021-03-05 14:26:34
110
原创 微信小程序navigatTo失败 navigateTo:fail can not navigateTo a tabbar page
navigateTo:fail can not navigateTo a tabbar page最近在开发微信小程序,其中页面跳转使用的是wx.navigateTo()这个api但是今天开始时跳转时没有跳转成功 模拟器控制台也没报错后来用真机调试发现了错误navigateTo:fail can not navigateTo a tabbar page这个是因为跳转的页面是底部tabbar里面的页面,所以页面无法跳转解决方法：使用switchTab代替navigateTo 如下wx.swit
2021-01-08 17:15:14
1361
原创 微信小程序canvas 生成海报的一些坑
微信小程序canvas 生成海报的 一些坑我们公司目前在把支付宝小程序转换成微信小程序,虽然都是小程序,但是开发时还是有很多地方不一样,踩了一些坑.不能设置display:none;canvas生成海报的时候,在支付宝小程序里面,我喜欢把canvas标签隐藏调,这样不占用页面空间.但是在微信里面不能这样设置,不然就会报错,如下图(模拟器不报错,真机调试报错)所以为了隐藏掉canvas标签所占位置,可以通过position定位实现的.canvas { position: absolute;
2021-01-05 13:38:23
1235
原创 高德地图前端实现查看某个地点位置
高德地图前端实现查看某个地点位置我这里卸载了一个方法里面,调用该方法就可以实现跳转位置点页面了 toAmapPage() { let key = '此处是你的key' let dest = [120.148833,30.230984] // 这里是位置坐标点 let destName = '雷峰塔' // 这个是位置点的描述 co
2020-11-18 16:56:23
864
原创 vue和react 动态渲染div的宽度
react 动态渲染div的宽度react里面使用map遍历,动态渲染 {dataList && dataList.length > 0 && dataList.map((item, index) => { return <div key={index}> <div className="bgcolor" style={{ "width": `${item.length}%` }}>
2020-10-21 15:32:29
1360
原创 vue里面的js引入图片，必须用require
vue中js引入图片,须用require引入一般情况下,我们在vue里面引入图片的话,基本上是这样子写的 <img src="../../assets/logo.png" alt=""> 但是在有些需求下,图片需要在在js里面引入,这种情况下,vue中js引入图片,需要用require下面列举例子以供参考<template> <div style="display:flex;"> <div v-for="it
2020-09-21 16:33:54
4756
原创 vue 实现图片预览
vue实现图片预览现在很多的项目里面图片展示缩略图,然后点击实现图片预览,放大的功能最近我的项目里面就遇见了这么个场景,我选用了插件进行处理下面说下实现步骤1、首先安装插件npm install vue-photo-preview --save插件地址 2、在main.js里面引入,全局使用import preview from 'vue-photo-preview'import 'vue-photo-preview/dist/skin.css'Vue.use(preview)
2020-09-07 17:23:45
14269
3
原创 react写h5 使用antd-mobile的Carousel 走马灯控制台报错Unable to preventDefault inside passive event listener due t
最近在用react 写h5移动端，使用的ui库就是antd-mobile，在使用 Carousel的时候 滑动报错了，如下查阅了写文章问题原因由于浏览器必须要在执行事件处理函数之后，才能知道有没有掉用过 preventDefault() ，这就导致了浏览器不能及时响应滚动，略有延迟。 所以为了让页面滚动的效果如丝般顺滑，从 chrome56 开始，在 window、document 和 body 上注册的 touchstart 和 touchmove 事件处理函数，会默认为是 passive:
2020-08-15 17:26:35
1945
4
原创 react使用动态添加类名className和样式
一般我们实现css 的时候 会给一个class添加多个样式 比如<div class="class1 class2">HELLO WORLD</div>但是如果你在jsx文件里，通过import的形式引入的less，那么就不能这么写了，那么这时候想实现上面的效果怎么办，如下React实现 双类名/多类名方法一// React实现 双类名/多类名import styles from './styles.less';// 常用// （字符串写法）<div
2020-08-15 17:12:54
18297
原创 css 画一个心
<div class="app"> <div class="heart"></div> </div> .app { width: 100vw; height: 100vh; display: flex; justify-content: center; align-items: center; } .heart { width: 100px; height: 100px;..
2020-08-04 11:07:40
213
原创 小程序组件传值
小程序开发时，有很多场景需要用到组件间跳转传值下面介绍两种跳转页面传递参数的方法第一种，使用官方文档提供的方法，在url后面拼接 let url = '../pageOne/pageOne?id=' + data.id + '&name=' + data.name + '&age=' + data.age; 第二种方法使用json转换的方法let item={ name:'张三', age：'18', id:'01'} let url= `/pages/pageO
2020-08-04 10:34:38
318
原创 js常用方法
字符串去除空格和将const data1 = '2018- 09 - 09' function test(str) { str = str.replace(/-/g, "/");//将'-'换成'/' str = str.replace(/\s/g, "") //去掉字符串内出现的所有空格 return str; } console.log(test(data1)) //结果 2018/09/09...
2020-07-28 16:25:48
151
原创 JS分割数组的方法
将数组分成多少个小数组// 将数组分成多少个小数组 arr是原数组，length是想分的数量function division(arr, length) { let index = 0; let newArray = [] while (index < arr.length) { newArray.push(arr.splice(index, index += length)) } return newArray}let testData = division(d
2020-07-27 10:50:53
28759
1
原创 Vue常见面试题
vue的一些常见的面试题1、Vue实现双向数据绑定原理采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty（）来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应监听回调。通过 getter 和 setter 劫持了对对象赋值的过程，在这个过程中可以进行更新 dom 操作等等2、bus需要注意什么事件订阅必须在事件广播前注册；取消事件订阅必须跟事件订阅成对出现。数据量比较少时可以使用，业务多或者数据比较复杂建议使用vuex3、
2020-07-17 09:12:51
298
原创 web常见面试题
web常见面试题箭头函数与普通函数的区别this指向问题事件冒泡阻止事件冒泡和阻止默认动作Doctype的作用：声明文档类型 （标准模式还是混杂模式）列举三种强制转换和2种隐式型转换H5新增特性伪类和伪元素var let const定位闭包promiseem 和rem 的区别本地存储和离线存储call bind applyReact 和 vue 有哪些不同，说说你对这两个框架的看法数组去重和排序vuex工作原理页面回流和重绘浏览器的渲染过程怎么用border做一个三角形前端性能优化箭头函数与普通函数的区别
2020-07-15 21:21:52
370
原创 react面试题
react面试题介绍项目经验并提问function component和class component的区别react新增的生命周期redux 相关面试题redux的数据流store和action都是对象, action中必须有一个type字段对进行的操作进行说明, 可能会有数据.action是对象还是函数，action一般是怎么写的redux和react-redux的关系connect的实现原理那connect做了些什么呢？provider的功能是什么高阶组件的用法，什么场景会用到import和requi
2020-07-15 21:21:20
272
原创 判断判断数据基本类型的常用方法
判断判断数据基本类型的常用方法js判断数组的常用方法一、Array.isArray()二、instanceof三、constructor四、.Object.prototype.toSrtring.call([ ])js判断基本类型的常用方法js判断数组的常用方法一、Array.isArray()Array.isArray([1,2,3]);二、instanceofvar arr = [1,2,3];arr instanceof Array三、constructorvar arr = [1
2020-06-02 16:35:01
802
原创 git 拉取分支代码/切换远程分支
git 命令行拉取代码分支名称为develop 的分支代码地址为 XXXgit clone -b develop XXX 这样就能拉取到指定分支的代码了
2019-11-04 10:34:54
2335
原创 VSCode设置成中文
平时开发时经常使用代码编辑器，我所使用的就是目前很火的一款VSCode，使用非常方便，因为其默认显示的是英文，但是很多人喜欢用中文进行显示，如下就可以了。打开vscode后，使用快捷键（Ctrl+Shift+p），然后在搜索框里面输入 ‘‘configure display language’’ (如图)然后点击选择 ‘‘zh-cn’’,并单击确认按钮重启vscode即可注意如果...
2019-08-09 14:05:29
375
原创 IOS按钮样式覆盖
自己开发了一个H5的应用，没有引用插件，在设置按钮样式的时候，发现在苹果手机上的按钮样式显示的不一样，所以找了一下原因。原因：苹果手机自带样式把我设置的样式给覆盖掉了解决方法:在css文件中加一句代码input[type=button], input[type=submit], input[type=file], button { cursor: pointer; -webkit-appea...
2019-07-22 09:13:17
542
原创 H5页面不缓存
在这段时间的开发遇到了一个需求，每次打开应用，会缓存以前的一些内容，影响使用体验。解决方式，在html页面上添加三行代码就能搞定代码如下<meta http-equiv="pragma" content="no-cache"><meta http-equiv="cache-control" content="no-cache"><meta http-equi...
2019-07-18 17:07:48
2679
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人