- 博客(156)
- 收藏
- 关注
RSS订阅原创 clearInterval清除定时器失效的原因
在本页面定义了一个定时器，离开页面的时候清除定时器，发现失效。原因是在本页面的不同地方调用了这个定时器，最后清除的只是最后一次调用的定时器，之前的定时器都没有清除。比如，我定义了一个定时器getTimer(){ this.timer = setInterval(() => { console.log('定时器') }, 2000)}在刚进入页面的时候调用了一次componentDidMount() { this.getTime
2020-08-21 16:25:47
11061
3
原创 react-native打包android的apk报错Duplicate resources
报错问题：react-native在打包apk包的时候报错Duplicate resources报错原因：资源id重复解决办法，找到路径为your project/node_modules/react-native/react.gradle的文件，在dofirst后添加如下dolast代码：doFirst { jsBundleDir.deleteDir() jsBundleDir.mkdirs() reso
2020-08-11 11:33:02
594
原创 RN的<Text>多余文字显示省略号
<Text numberOfLines={2} ellipsizeMode={'tail'} >文字文字文字文字文字文字</Text>其中的numberOfLines是文字需要显示的行数，设置***ellipsizeMode={‘tail’}***以后多出部分会显示省略号若有疑问，可留言！如有帮助，可给请作者的一杯咖啡添砖加瓦：...
2020-05-09 15:28:45
1786
原创 RN使用setState不生效的解决方法---react-native
原因：因为setState是异步的，改变值以后不能立即使用setState之后，需要走完react-native生命周期，也就是走到render时，state的值 才会变成setState设置时的值但是我们在开发过程中会需要setState即时改变值，那么怎么解决呢。方法代码this.setState({ id: 1},()=>{ console.log(this.state.id)})如上，只需要在setState后面添加一个回调函数即可。若有疑问，可留言！如有帮助
2020-05-09 13:21:34
1703
3
原创 Vue项目切换语言，vue项目国际化，使用vue-i18n前端实现中英文切换
在项目需求中，我们会遇到国际化的中英文切换。使用vue搭建的项目中我们可以使用i18n插件进行项目的中英文切换。npm引入i18nnpm install i18n --save-dev为了数据的使用方便，我们需要在src文件夹下建立一个如下图的文件夹index.js：import Vue from 'vue'import VueI18n from 'vue-i18n'Vu...
2020-04-29 11:07:32
1477
原创 table中为tr设置border
在web开发过程中，我们有时候需要给tr一整行添加border，需要展示如下图的效果：但是通过设置tr的border并没有什么作用，比如下面的代码这样。tr{ border-top:0.01rem solid rgba(102,102,102,0.1);}因为table中的tr并不是一个单一的边框，这个时候我们需要给table设置border-collapse属性，将一行表格设置成...
2020-04-15 15:24:19
4568
原创 javascript es6字符串的新增实例方法includes()、startWith()、endWith()；判断一个字符串是否包含另一个字符串
es5中，我们判断一个字符串中是否包含另一个字符串，只有一种indexOf()方法。在es6中，新增了实例方法includes()、startWith()、endWith()可以用来判断一个字符串是否包含另一个字符串。includes()—返回布尔值，表示是否找到参数字符串。startWith()—返回布尔值，表示是否在原字符串头部找到参数字符串。endWith()—返回布尔值，表示是否在...
2020-04-09 16:27:52
1008
1
原创 react-native三角形样式
写一个这样的三角形结构：<View style={styles.areaChoice}></View>样式：const styles = StyleSheet.create({ areaChoice:{ width:0, height:0, borderStyle:'solid', borderWidth:6, bord...
2019-12-25 11:27:37
1986
原创 React-native用代码写一个向右的箭头样式
写一个这样的向右箭头结构：<View style={styles.iconToDetails}></View>样式：const styles StyleSheet.create({ iconToDetails:{ width: 10, height: 10, borderColor:'#666', borderTopWidth:...
2019-12-25 11:22:05
1304
原创 Vue项目中keepAlive的用法进行页面的缓存
一、在route文件中设置需要缓存组件的路由元（meta）加入KeepAlvie:true这样的键值对，如图二、在app.js文件中，加入keep-alive的组件，进行如下设置这样子就可以进行页面的缓存了再次（非首次）缓存的页面，会触发的生命周期函数是activated()和deactivated(),如果需要，可以在这两个函数中进行方法执行。...
2019-11-26 14:28:51
1300
原创 react-native 动画Animated，高度变化的动画
在react-native中我们使用Animated来编写动画的代码。参考文档：react-native 动画api在项目实践中，用到的是最简单的Animated.timing，实现view组件根据高度变化的过渡动画。如图，点击收起的时候，日历高度变化，在高度变化的过程中有个动画过渡的效果。同样，收起以后，再点击展开也会有一个高度变化的动画过渡效果。以下是代码的实现1.引入Anim...
2019-10-31 15:41:34
3672
原创 Element的el-cascader级联选择器组件获取选中的label
例如上图，需要拿到新疆/乌鲁木齐市的值<el-cascader ref="cascaderAddr" :options="this.$Address.data" @change="handleAreaChange"></el-cascader>给el-cascader组件设置ref为cascaderAddr设置change事件handleAreaCh...
2019-10-29 11:40:00
2922
原创 H5移动端键盘弹起影响页面布局的问题
在h5页面开发的时候，遇到input输入框弹起手机键盘，会把页面元素浮动从而影响布局的解决方法绑定input的失焦事件，将页面滚动到0的位置，即可恢复页面正常布局input_blur () { // document.body.scrollTop = document.documentElement.scrollTop - 1 setTimeout(() => { var...
2019-10-21 10:25:48
2498
原创 React-Native在父组件中绑定子组件的点击事件，父组件传值给子组件
父组件： <CommonBottomBtn />在父组件中，我们想要给CommonBottomBtn这个组件进行事件的绑定，如果单纯使用onPress是不生效的。需要在子组件中给组件进行onPress的绑定，再在父组件中调用，如下所示父组件改变 <CommonBottomBtn itemClick={()=>{this.clickEvent()}} text={...
2019-09-17 15:46:55
1840
1
原创 Vue的项目在ie浏览器中报错：Unhandled promise rejection ReferenceError: “Promise”未定义
vue的项目启动以后，在ie浏览器中报错：Unhandled promise rejection ReferenceError: “Promise”未定义问题原因：①：ie的一些低版本对于ES6语法不支持②：Promise是es6语法里为了解决异步函数多重嵌套的问题(回调地狱)（也有可能项目中并没有使用Promise,但是使用的Axios等,其中原理也是Promise,只是进行了封装）...
2019-08-09 17:11:23
15436
3
原创 使用css3的linear-gradient线性渐变实现虚线图形
在开发过程中，有画出虚线的需求：如果使用border的dashed的属性，虽然也是虚线，但是不能控制每一个虚线的宽度可以使用css3的linear-gradient进行虚线的绘制:html：<div class="dashedBorder"></div>css:.dashedBorder{ height: 1px; background:l...
2019-08-08 20:21:13
2792
1
原创 element-ui的upload上传图片校验图片的宽高
使用element-ui的upload上传图片，官方文档中提供了在beforePicUpload中校验图片格式和大小的方法，但是没有提供校验宽高方法。需求：在开发的过程中，我们可能需要限制图片的width和heigth相同，也可能需要限制width比height长，还有可能需要限制height比width长。解决方法：beforePicUpload (file) { let _...
2019-08-06 17:20:20
3747
1
原创 css中使用伪类:not(first-child)过滤不能排除第一个元素的解决方法
需求效果：除了一个div元素下的第一个ul元素不使用这个样式使用:not(first-child)之后不能过滤掉第一个ul元素的样式，代码如下：<div class="listWrap"> <div v-for="(item,index) in items" class="sidebarmain" :key="index" > <div...
2019-07-31 10:28:34
14465
原创 当input的类型为number时候，限制输入的数字长度
当input的type为text的时候，使用maxlength可以有效限制输入长度。<input type="text" maxlength="5" /> 但是当type为number的时候，设置maxlength限制输入长度就会失效，长度可以无限输入。 <input type="number" maxlength="5" />解决方法：...
2019-07-30 10:56:45
4422
原创 vue项目el-upload移动端ios手机拍照上传相册旋转90度的问题修复
vue项目兼容移动端，上传图片用到的是element的el-upload组件，ios手机端使用的时候，拍照上传照片会出现旋转90度的问题，以下为解决方案需要在el-upload组件的beforePicUpload的方法中对ios拍照上传的图片进行处理①，需要用到exif-js插件进行照片的处理：npm install exif-js --save②新建...
2019-07-29 11:40:00
983
原创 Modeule AppRegistry is not a registered callable module(call runApplication）
Modeule AppRegistry is not a registered callable module(call runApplication）在RN项目启动时，报错如上杀掉所有node进程 ；cmd命令执行，npm start3.启动项目react-native run-ios// 或者 react-native run-android...
2019-06-11 18:52:24
1735
原创 javascript的replace替换字符串的最后一个匹配项
项目需求：替换最后一个匹配项使用方法：replace使用replace匹配的是第一个匹配项，或者使用g进行全局匹配，与需求不符匹配最后一个匹配项并替换，需要用到一种贪婪模式var str = 000p111p222p333str = str.replace(/(.*)p/, '$1div')console.log(str) //000p...
2019-05-30 10:17:00
9137
2
原创 vue中实时监听input中字符长度并限制，Element-ui el-input
用vue写的后台管理系统，input需要限制输入内容的字符长度（如果需要限制字符串的长度，只需要使用element-ui中的input的maxlength和minlength属性即可，原生的input同样的做法）如果是限制字符长度，el-input覆盖了原生的方法，需要将el-input元素更换成原生input，如果想保持el-input 的样式，只需要给input添加 el-...
2019-05-15 11:23:00
3782
2
原创 JavaScript根据某个特定的值删除数组中的指定元素
在项目中，我们经常需要根据某个特定的值删除数组中的元素，怎么删除呢？我们可以用到splice()这个方法----- splice的定义引用于http://www.w3school.com.cn/jsref/jsref_splice.asp1.简单的一维数组：var arr = [ a, b, c, d, f……]如上数组，想要删除b这个元素的方法：fu...
2019-05-07 14:21:00
1430
原创 vue中，将a变量赋值给b变量，修改a变量，会影响到b变量。vue缓存重置问题
查询接口获取到的接口数据渲染进页面以后，想要存储一份，以防用户点击重置按钮，不要再次调用接口获取数据。在vue中，a变量赋值b变量以后，修改a变量的内容，会影响到b变量也同时修改，这样就不符合需求。解决方法：赋值的时候使用JSON.parse()和JSON.stringify()进行转换即可赋值以后，b变量不受影响this.b = JSON.parse(JSON.string...
2019-05-07 13:48:00
851
原创 JavaScript前端将时间戳转换为日期格式
function (data) { var date = new Date(data) var Y = date.getFullYear() + '-' var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-' var D = (date...
2019-04-19 12:04:00
1333
原创 JavaScript获取0-100之间的随机数
function (min, max) { return Math.floor(Math.random() * (max - min)) + min }如果想获取0-100之间的随机数，则可将函数的min和max分别设置为0和100获取其他范围内的随机数亦然...
2019-04-19 12:02:00
6852
原创 npm run dev启动项目报错 Cannot find module 'webpack-cli/bin/config-yargs'
一般是webpack的版本和webpackserver的版本不兼容导致的错误。解决方法是先卸载这两个版本，再安装指定的版本。卸载：再安装指定或者最新版本的webpack和webpack-dev-server：然后就成功啦;...
2019-04-10 13:30:00
1447
原创 js如何将一个json数组对应放置到另一数组中去
需要将上面这个数组的每一个元素对应添加至下面的数组中最后合成为这样的数组：使用for循环，将第一个数组中的元素循环到第二个数组中...
2019-03-21 17:27:00
1764
原创 vue中通过定义的数组循环将img的src引入图片却不显示图片问题解决方法
需要前端循环图片数组将其放到页面中去。需要将src渲染到页面中，如果单纯写src的路径会出现不显示图片的问题因为图片路径在assets，所以需要require一下。如有疑问，请留言...
2019-03-21 17:01:00
3037
原创 vue中监听页面滚动和监听某元素滚动
①监听页面滚动在生命周期mounted中进行监听滚动：mounted () { window.addEventListener('scroll', this.scrollToTop)},在方法中定义监听滚动执行的方法：scrollToTop() { var scrollTop = window.pageYOffset || document.d...
2019-03-21 14:10:00
6740
1
原创 vue项目在ie浏览器和360浏览器的兼容模式下不显示，出现promise未定义问题
出现“promise未定义”问题，因为对es6不兼容在项目中安装 babel-polyfill 依赖包①npm install babel-polyfill --save-dev②在main.js中引用import 'babel-polyfill'重新启动项目即可...
2019-03-18 14:11:00
625
原创 react+webpack搭建项目
一、环境准备①node②npm二、开始搭建①使用npm安装create-react-app工具，在cmd命令行中输入：npm install -g create-react-app②使用命令创建新的react项目，在cmd命令行中输入：create-react-app first-react-app// first-react-app为你需要创建的项目名称③打开...
2019-03-08 11:16:00
226
原创 如何在localStorage中存取数组
默认localStorage只能存取字符串那么如何存取数组呢let newlist = []localStorage.setItem('recent', JSON.stringify(newlist))let list = JSON.parse(localStorage.getItem('recent'))...
2019-03-05 14:49:00
459
原创 vue项目中分享到朋友圈，调用微信接口
虽然微信提供了jssdk，不代表可以点击按钮进行分享到朋友圈，是需要微信自带的浏览器右上角进行分享。手机浏览器需要浏览器支持分享到朋友圈的分享机制。微信jssdk地址：https://mp.weixin.qq.com/wiki?action=doc&id=mp1421141115&t=0.6985271624097684#0npm安装微信的jssdk安装包：ma...
2018-12-29 18:22:00
2070
原创 js获取浏览器上一访问页面URL地址，document.referrer方法
如题，可用document.referrer方法获取上一页面的url但是也有不可使用的情况直接在浏览器地址栏中输入地址；使用location.reload()刷新（location.href或者location.replace()刷新有信息）；在微信对话框中，点击链接进入微信自身的浏览器；扫码进入QQ或者微信的浏览器；直接新窗口打开一个页面； 2017.8.3更新 新版...
2018-12-17 14:54:00
2165
原创 vue中使用window.open会在url前自动添加本地服务器的地址bug修复
不能写成www.baidu.com需要写成https://www.baidu.com
2018-12-17 14:51:00
6868
原创 确保img的宽高比固定
html:<div class="wrapper"> <swiper :options="swiperOption"> <swiper-slide> <img class="swiper-img" src="http://img1.qunarzz.com/...
2018-12-05 14:40:00
809
原创 微信小程序获取手机信息
wx.getSystemInfo({ success: function (res) { console.log(res.model)//手机型号 console.log(res.pixelRatio) console.log(res.windowWidth) console.log(res.windowHeight) console.log(res.language)...
2018-10-25 15:40:00
269
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人