- 博客(114)
- 收藏
- 关注
RSS订阅原创 移动页面元素，先从原点出发，向左移动20px，再向上移动50，最后再向左移30px，请把运动路径画下来
一.用callback形式回调const walk=(target,direction,distance,callback)=>{ setTimeout(()=>{ //parseInt() 10代表只能是10的倍数 let currentLeft=parseInt(target.style.left,10) let currentTop=parseInt(target.style.top,10) console.info('currentLeft',currentLef
2022-03-17 11:24:43
397
原创 js判断数据类型的几种方法的总结
一.js数据类型及其判断1.typeof 数组和null，date属于object类型console.info(typeof 5) //numberconsole.info(typeof 'a')//stringconsole.info(typeof true)//booleanconsole.info(typeof undefined)//undefinedconsole.info(typeof null)//objectfunction fn(){ }console.info(t
2022-03-15 21:58:09
610
原创 两种用原生js如何获取文档中任意一个元素与文档顶部的距离
一.用原生js如何获取文档中任意一个元素与文档顶部的距离//方式一const offset=ele =>{ let result={ left:0,top:0 } const getOffset=(node,init)=>{ //如何不是一个元素节点 if(node.nodeType!=1){ return } //获取定位类型 let position=window.getComputedStyle(node)['position'] //如果定位类
2022-03-15 10:27:51
2214
原创 js调用栈，js闭包，js数据类型的堆栈空间，常见内存泄漏场景及解决办法
1.调用栈 先入栈先出栈function foo1(){ foo2()}function foo2(){ foo3()}function foo3(){ console.info('foo4')}foo1()2.闭包 内层函数可以引用外层作用域下的变量function numGenerator(){ let num=1 num++ return ()=>{ console.info(num) }}var getNum=numGenerator()getNu
2022-03-14 16:57:10
300
原创 js中this指向问题
一.全局环境下的this,在严格模式下,this会绑定到undified,在非严格模式下绑定到window上function f1(){ console.info(this)}function f2(){ 'use strict' console.info(this)}f1() //输出windowf2() //输出undified二.上下文中调用的this,指向最后调用它的对象const person={ name:'Lucas', brother:{ name:'
2022-03-14 10:52:34
405
原创 vue 中NonProp的使用
一.子组件代码<template> <div> <p>通过prop接收：{{content}}</p> <p>通过NonProp接收：{{$attrs.nonPropContent}}</p> </div></template><script>export default { name:'NonProp', props:['co
2022-03-04 09:15:14
272
原创 vue中computed和watch的区别
一.computed计算后的值不需要再data中定义。watch中监听后的值需要在data中定义。二.computed有缓存，watcher不存在缓存三.computed代码更加简洁<template> <div> <p>我所在的城市：<input v-model="city"/>(这个是watched property)</p> <p>我所在的街道：<input v-model='d
2022-03-03 21:51:47
687
原创 vue中computed，methods区别
一.computed和methods主要区别在于是否有缓存。computed每次都会把结果缓存起来，如果依赖的数据没变都不会重新计算。methods每次都会重新计算相应的值。<template> <div> <p>原始字符串:{{text}}</p> <p>通过computed运算后得到的字符串:{{computedText}}</p> <p>通过method运算后
2022-03-03 21:28:34
329
原创 函数作用域（普通函数，元编程定义函数）
一.普通函数可以对全局变量做赋值var a=2function four(){ console.info('in four,before a=4:'+a) //输出2 if(true){ a=4; } console.info('in four,before a=4:'+a) //输出4}二，通过元编程定义函数中的变量，不会污染全局变量var foo=1var six=(function(){ var foo=6 return function(){ cons
2022-03-03 20:15:42
123
原创 vue中v-model的后缀词
1.v-model.lazy在用户对文本输入的时候，文本框的字不会随着用户按下的每个键立刻发生变化，而是等焦点彻底离开文本框才会显示。input:<input v-model.lazy="inputValue" type="number"/>输入的值：{{inputValue}}2.v-model.number强制输入数字input:<input v-model.number="inputValue" type="text"/>输入的值：{{inputValue}3.
2022-03-02 17:51:09
499
原创 vue执行原理流程
1.用户在浏览器中输入网址，按回车键2.浏览器加载所有的资源（js,html内容），此时尚未解析。3.浏览器加载vue.js4.vue.js程序被执行，发现页面中的指令进行相关的解析5.HTML的内容被替换，展现给用户这一过程符合单页面局部加载的问题...
2022-03-01 10:03:40
395
原创 ES6常见新增特性
一.let varvar 可能会引起变量提升和块级作用域问题let 为了解决上面的问题二.导入代码 用import三.方便其他代码使用自己，export default{}四.函数简写data(){}等同于data:function(){}五.箭头函数六.分号可以省略七.解构赋值person：{name:‘tom’,age:18}解构赋值可以写成：let {name,age}=person等同于：let name=person.namelet age=perso
2022-03-01 09:17:18
95
原创 前端SPA三大框架的对比
单页面应用主要是局部刷新的优势，速度快，带宽小。客户端服务器端压力小。一.angular1.SPA老大哥，起源于google。2.第一个SPA框架3.双向绑定，MVC的解耦。二.react1.facebook推出2.使用js就可以写前后端代码。3.reactnative应用手机端很流行三.vueJS1.简单易学2.其他两大框架有的功能vue都有。3.中国人开发，文档有中英文版。4.github上stars数增长趋势最高。...
2022-02-27 14:41:15
1053
原创 echart tooltip显示不全，溢出屏幕问题
在tooltip下面加入position回调函数//如果饼图位于屏幕的左侧position: function(point, params, dom, rect, size){ // size为当前窗口大小 if((size.viewSize[0]/2)>=point[0]){ //其中point为当前鼠标的位置,在左侧 return [point[0],point[1]]; .
2021-12-02 17:30:58
1316
原创 鼠标移入时，一个div从另外一个div过渡飞出动效
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <style> .div1{ width:100px; height:100px; background-color: skyblue; position:absolute; left:120px; top:
2021-10-22 11:08:56
376
原创 左边div固定宽度，右侧div固定的方式
1.父级div定位relative，子级右侧div position left：左边宽度，right：0<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <style> .container{ position:relative; width:500px; height:5
2021-03-19 16:08:51
243
原创 axios请求方法
get：获取数据post：提交数据（表单提交+文件上传）put：更新数据（将所有的数据提交到后端）patch：更新数据（只将修改的数据提交到后端）delete：删除数据（请求参数既可以放在url上，也阔以放在data）//axios 请求的两种写法let data={id=12;}axios.post(’./post’,data).then(res=>{console.info(res)})axios({method:‘post’url:’./post’data:data
2021-01-13 10:42:28
179
原创 js 数组的every和some方法的区别
1.js的every只要数组中有一个值为false，这个返回就是false，全部为true才会返回true。类似||或操作2.js的some只要数组中有一个值为true，返回就是true，全部为false返回的才是false。类似&&与操作...
2021-01-07 11:33:01
354
1
原创 js 获取前5个月的月份
//获取当前月份前5个月的数据 let date = new Date(); let MonthData=[] let month='' let m=date.getMonth()+1-5; for(let i=0;i<5;i++){ if(m<0){ month= 12 - (Math.abs(m) % 12)+i if(m.
2020-08-06 17:29:11
937
原创 js用sort存在排序不正确漏洞
解决办法：computed:{sortItems:function(){return this.items.sort(sortNumber)}}function sortNumber(a,b){return a-b}<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <script src="https://cdn
2020-08-01 18:04:58
319
原创 ES6 遍历数组的几种方法
1.for…of…let arr=['a','b','c']for(let item of arr){ console.info(item)}2.forEachlet arr=['a','b','c']arr.forEach((value,index)=>console.info(index,value))3.filterlet arr=['a','b','c']arr.filter(x=>console.info(x))4.somelet arr=['a','b'
2020-07-31 17:53:03
1026
原创 百度地图引入到vue中
新建一个文件夹 Map.jsexport function MP(ak) { return new Promise(function (resolve, reject) { window.onload = function () { resolve(BMap) } var script = document.createElement("script"); script.type = "text/javascript";
2020-07-24 14:58:10
184
转载 腾讯地图 logo去除
logo与container的关系$(function(){$("#container").bind(“DOMNodeInserted”,function(e){var tempCount = 0;$("#concontainer>div").children().each(function(){tempCount++;if(tempCount2||tempCount3){$(this).remove();}});});});
2020-07-23 16:56:51
2301
1
原创 微信小程序：wx.navigateTo和wx.redirectTo区别
wx.navigateTo 新窗口打开页面wx.redirectTo 原窗口打开页面按返回箭头回到上一次显示的页面，按返回箭头回到上上页面
2020-05-11 17:24:59
304
1
原创 微信小程序 上滑加载和下拉刷新
上滑加载 ：上滑是指鼠标上滑或者手指上滑，此时滚动条向下滚动，加载旧数据。下拉刷新：下拉是指鼠标下拉或者手机下拉，此时滚动条向上滚动，加载新数据。scroll-view方法遇到的问题：如果数据量很小的时候，没有滚动条的时候，scroll-view中的bindscrolltolower和bindscrolltoupper并不会触发。wxml: <scroll-view scroll-top="{{scrollTop}}" scroll-y="true" style="height:
2020-05-11 16:25:52
814
原创 微信小程序 swiper
一.wxml<view class="section"> <swiper indicator-dots="{{inditoeDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}"> <block wx:for="{{imgUrls}}"> ...
2020-04-12 11:02:21
135
原创 微信小程序：scroll-view
一.wxml<view class="section"> <view class="section_title">vertical scroll</view> <scroll-view scroll-y="true" style="height:200px;" bindscrolltoupper="upper" bindscrolltolower...
2020-04-12 09:59:09
102
原创 小程序生命周期
一.小程序执行的生命周期：app.onlaunch->app.onshow->page1.onload->page1.onShow->page1.onReady->page1.onhide->page2.onLoad->page2.onShow->page2.onReady->page2.onUnload-page1.onShow->…...
2020-04-10 15:56:50
384
原创 wx.showActionSheet不能超过6个解决方案
一.选择用picker参考地址：https://developers.weixin.qq.com/miniprogram/dev/component/picker.html二：代码wxml <picker bindchange="bindFromPickerChange" value="{{fromIndex}}" range="{{orderData.station}}"> ...
2020-04-10 10:27:17
2495
原创 小程序快捷键
Ctrl+end 移到文件结尾Ctrl+home 移到文件开头Ctrl+i 选中当前行shift+end 选择从光标到行尾shift+home 选择从行首到光标处ctrl+d 选中匹配ctrl+u 光标回退ctrl+s 保存ctrl+shift+[ 折叠代码块ctrl+shift+] 打开折叠块ctrl+c ，ctrl+v 复制，粘贴shi...
2020-04-09 09:31:25
325
原创 小程序一周购票信息显示（显示本周日期与及对应的第几周）
1.效果图如下var date = new Date(); var month = date.getMonth(); var week = date.getDay(); var month = month + 1; var day = date.getDate(); // week：周几，day：几号 var weekArr = [{ ticke...
2020-04-07 18:05:09
635
原创 微信小程序根据起点和终点进行路线规划(driving)
一：wxml部分<view class="panel-map"> <map longitude="{{longitude}}" latitude="{{latitude}}" markers="{{markers}}" polyline="{{polyline}}" scale="12"></map></view>二.js 在js顶部声...
2020-03-31 10:37:37
1641
原创 微信小程序（模糊查询）qqmap-wx-jssdk.js使用
1.下载qqmap-wx-jssdk.jshttps://lbs.qq.com/qqmap_wx_jssdk/index.html2.将下载后的文件下载到项目3.调用var qqMapWx = new QQMapWX({ key: ' key值' }) qqMapWx.getSuggestion({ keyword:value, region:_this...
2020-03-27 14:06:39
7290
原创 微信小程序 搜索框（searchbar组件的使用）
1.下载searchbar及相关联cell和cells组件https://developers.weixin.qq.com/miniprogram/dev/extended/weui/download.html2.将组件放到代码模块下3.修改json文件中组件路径引用4.引用json部分 "usingComponents": { "mp-searchbar": "../...
2020-03-27 11:58:26
15197
5
原创 小程序 输入框禁止输入和显示可输入切换
根据isApply来设置禁止框和输入框可输入切换<button wx:if="{{!isApply}}" class="submit_btn" form-type="submit" readonly="{{isApply}}">提交</button><button wx:if="{{isApply}}" class="submit_btn" form-type="...
2020-03-25 11:24:14
1844
1
原创 微信小程序页面之间通信
一.通过字符串拼接方式wxml代码块<view class="border-black margin-left-right-25" style="flex:1" bindtap="testDrive" data-type="{{item.type}}" data-typename="{{item.typename}}">...
2020-03-24 14:50:56
1272
原创 微信小程序：手机号授权
1.wxml 设置open-type=“getPhoneNumber” 和bindgetphonenumber=“getPhoneNumber”<button class="panel-button" open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber" size="mini">授权</button&g...
2020-03-24 10:56:57
1032
原创 微信分享功能
1.自定义button（分享按钮， open-type必须设为"share"<view><button bindtap="showShareMenu" open-type="share">分享</button></view>2.js中调用wx.showShareMenu({})，并且在onShareAppMessage可自义分享界面showS...
2020-03-24 10:47:42
340
原创 eventChannel.on is not a function;at "pages/sales/sales-order" page lifeCycleMethod onLoad function
原因是启动页为当前页面，而当前页面存在父页面。子页面需要接收父页面传过来的参数。eventChannel是从父页面传递过来的方法，用子页面接收。解决办法：将页面启动项设为父页面，而不是子页面...
2020-03-18 16:55:33
3412
3
原创 小程序提交按钮
两处需要设置：1.button。通过form-type=“绑定事件”。此处submit是绑定事件确认提交2.form 。通过bindsubmit=“绑定事件”。此处submit是绑定事件
2020-03-17 17:52:15
2547
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人