前端
如雨随行2020
哈撒给
展开
-
vue3.0配置跨域
在项目根目录下找到vue.config.js,如果没有,新建一个,修改以下内容module.exports = { devServer: { open: true, host: 'localhost', port: 8080, https: false, //以上的ip和端口是我们本机的;下面为需要跨域的 proxy: {//配置跨域 '/api': {原创 2020-05-17 01:28:10 · 1951 阅读 · 0 评论 -
canvas画圆形图片
function fillMyRect(ctx, x, y, w, h, r) { const rightRadio = h / 2; const angle = Math.asin(rightRadio / r); ctx.save(); ctx.beginPath(); ctx.moveTo(x + r * Math.cos(angle), y); ctx.lineTo...原创 2018-12-14 16:58:16 · 848 阅读 · 1 评论 -
小程序分享功能
一、分享给好友转发给好友/群:在小程序开发API中,发送给好友/群,可以有两种实现方式:1)入口a.小程序右上角自带的分享功能(…);如果在当前页面调用wx.hideShareMenu()方法,那么右上角的分享功能将被隐藏,当然,隐藏方法与现实方法是承兑出现的,调用wx.showShareMenu()方法,可以显示该功能。b.自定义分享按钮:<button open-type...原创 2018-12-08 16:39:27 · 1315 阅读 · 0 评论 -
小程序开发细节
一、文本,注意字数过多情况有些介绍性的文本,由于不知道对其的输入是否有控制,经常会出现文本的字数过多,超出控件的显示范围,从而使得显示与预计的不符。所以对于文本,一定要记得控制控件的高度和文本的显示行数,具体操作参考之前的博客《微信小程序text文本溢出单行/多行省略》。二、防连触用户在操作小程序的时候,难免会不小心连续点两次屏幕。大多数时候这种情况出现不会有影响,但是有的时候也会发生...原创 2018-11-27 18:36:29 · 157 阅读 · 0 评论 -
Promise用法
链式操作runAsync1、runAsync2和runAsync3是三个封装了异步方法setTimeout的方法。function runAsync1(){ var p = new Promise(function(resolve, reject){ //做一些异步操作 setTimeout(function(){ console...原创 2018-10-15 19:48:53 · 408 阅读 · 0 评论 -
小程序页面栈应用
页面栈原理小程序的每个页面都是一个page对象,拿到page对象就可以操作他的方法以及属性,page是放到页面栈里面的并且最多有5个页面栈应用通过getCurrentPages();获取页面栈内所有的Page对象,去某一个Page对象即可操作其方法和属性。比如页面跳转传参:1、从A页面跳转B页面2、B页面从栈里面取A页面的Page对象:var pages = getCurrentP...原创 2018-10-15 15:40:11 · 842 阅读 · 0 评论 -
小程序异步问题与简单Promise使用
一、在回调函数中处理后面业务二、setData最好放在最后执行(应该没影响,以防万一)因为setData方法耗时长,可能setData还没执行完,后面的代码就先执行了,所以,后面使用setData后的data里面的数据可能会不正确。所以尽量不要用setData里的数据,直接用 用来setData的数据。并且将setData放在最后执行...原创 2018-10-07 12:05:20 · 1378 阅读 · 0 评论 -
小程序开发效率提升(持续更新)
一、setData函数setData会重新渲染页面,很大程度的降低效率。没有涉及到前台页面修改,只涉及后台数据操作的时候最好不用setData函数。原创 2018-09-17 21:21:19 · 1077 阅读 · 0 评论 -
小程序开发遇到的bug(持续更新)
一、tostring问题 原因:应该是字符串操作问题 问题定位: 问题是出现在画布写文字时shareContent.fillText(shareContent[0], viewpointCenter, viewpointY);//shareContent是画布的上下文fillText第一个参数应该是一个字符串的,但是我当时写成了shareContent[...原创 2018-09-14 11:27:17 · 2747 阅读 · 0 评论 -
小程序开发原则(持续更新)
一、轻视觉 视觉上的轻盈是首当其冲的 1、弱化次要功能 比如对于新产品数据量比较少,能搜索到的东西比较有限,所以搜索功能是要被弱化的,由搜索框变成右上角的icon 2、去除冗余线条 去除边界和明显的区隔,更多是让内容本身来展现和区隔。 3、视觉统一轻松操作 界面中视觉效果高度统一会让页面清晰协调,用户在操作过程中认知成本...原创 2018-09-12 11:06:56 · 636 阅读 · 0 评论 -
微信小程序text文本溢出单行/多行省略
在做小程序的时候遇到在text标签里面的文本过长,需要限制显示长度,并且在限制了长度的后面加上省略号代表后面还有内容。我们css可以这么写.detail_text{ display: -webkit-box; font-size:28rpx; color:#000000; line-height: 40rpx; word-break: break-a...原创 2018-11-14 21:40:09 · 8085 阅读 · 0 评论 -
纯css画双箭头
不多说,直接上源码和效果图:.right_arrow { height: 20rpx; line-height: 20rpx; position: relative; padding: 18rpx; z-index: 4;}.sec_arrow { margin-left: -28rpx; z-index: 0;}/*黑色三角形 */.right_...原创 2018-11-13 20:34:20 · 3168 阅读 · 0 评论 -
使用CSS缩写
一些缩写的例子#content { background: #EDEDED url(img/bg.gif) no-repeat 30% 20px;}一、font字体缩写font:font-style | font-variant | font-weight | font-size | line-height | font-famliy//只要使用font作为属性名称,后接各个属性的值...原创 2018-09-22 22:07:42 · 188 阅读 · 0 评论 -
CSS图片剪切
如何让控制图片显示的尺寸在网站设计中,有时候会遇到对一张图片做多处使用,而每处显示的尺寸又不一定都一样,在传统作法中,需要根据不同尺寸设计不同的图片。不过利用css,能够很好解决这个问题。一、直接设置图片的width,height,或者直接改变图片的长宽比例虽然简单方便,但是会引起图像显示效果问题。因为浏览器不能像ps那样对图像以相对尺寸进行缩放运算,实际显示虽然简单方便,但是会引起图像显...原创 2018-09-18 14:18:21 · 9865 阅读 · 0 评论 -
相对定位与margin定位元素位置
我们知道如果要控制一个元素的位置,我们可以设置margin属性值。margin会但是,如何实现两个元素有部分重叠的效果呢(如下图)这时候,我们就要用到相对定位position:relative;top:40px;left:20px;...原创 2018-09-17 22:08:59 · 1488 阅读 · 0 评论 -
CSS字体样式
font-famliy:设置文字名称,使用逗号分隔,浏览器会按照先后顺序依次使用可用字体 常用值:黑体,宋体(不建议设置)font-style:设置文字样式 常用值:normal,italicfont-weight:加粗样式 常用值:normol,boldtext-decoration:设置文本下划线 常用值:none,underline,line-through,overli...原创 2018-09-14 11:18:54 · 676 阅读 · 0 评论 -
网页设计建议
设计原则**以用户使用体验为第一目标**表单设计建议 1、使用label标签提升表单可用性 2、明确的输入域标识不能一味地追求美观而使可输入框变得模糊不清。一定要明确,使访问者在使用表单的同时,能够迅速地理解表单元件的规则。3、验证数据及减少提交次数使用JavaScript或者Ajax无刷新页面模式,即在用户输入数据的同时,立即对数据进行规则验证,并随时提示用户数据...原创 2018-09-13 11:48:51 · 363 阅读 · 0 评论 -
CSS列表元素
ul无序列表、ol有序列表 list-style-image:设置图片作为列表中的项目符号 可用值:none,url list-style-position:设置项目符号的放置位置 可用值:inside,outside list-style-type:设置项目符号的几种默认样式 可用值:none,disc,circle,square,decimal,(ul ...原创 2018-09-13 09:33:32 · 355 阅读 · 0 评论 -
css背景控制
属性:background-attachment说明:设置背景图的滚动方式,可以为固定或者随内容滚动 可用值:fixed,scroll属性:background-position可用值:top left,top center,top right center left …属性:background-color可用值:RGB,hex,nam...原创 2018-09-12 12:09:46 · 213 阅读 · 0 评论 -
一列固定高度,宽度居中
HTML代码: <html> <head><title>一列固定宽度居中</title> <link rel = "stylesheet" type="text/css" href = "layout.css"> </head&g原创 2018-09-12 11:04:11 · 161 阅读 · 0 评论 -
两列显示以及浮动布局
一、两列宽度是窗口宽度的百分比 html:<html> <head> <title>两列</title> <link rel = "stylesheet" type="text/css" href = "layout.css"> </head&原创 2018-09-12 11:00:38 · 391 阅读 · 0 评论 -
绝对定位
如果一个对象被设置了position:absolute;#layout{ position:absolute; top:20px; left:0px;}它将从本质上与其他对象分离出来。它的定位模式不会影响其他对象,也不会被其他对象的浮动定位所影响。从某种意义上来讲,使用绝对定位后,对象就想一个图层一样飘浮在网页之上。...原创 2018-09-12 10:56:31 · 103 阅读 · 0 评论 -
三列显示
两列固定宽度,第三列居中显示 注:虽然css里面已经规定了body的margin和padding为0,但似乎body还是有margin-top:8px; margin-left/margin-right:10pxhtml:<html> <head> <title>两列</title> <...原创 2018-09-12 10:55:36 · 191 阅读 · 0 评论 -
盒模型-上下margin叠加问题
一开始,我们给a和b都设置了margin:10px; 理论上a和b之间的距离应该是20px,但实际上,a和b之间的距离只有10px; (这个大小取决于a的margin-bottom和b的margin-top的大小,取大的那个); 这是因为css设计所造成的,css设计者考虑到我们要对段落进行控制,比如多个p标签 形成的段落,如果这些p标签都具备margin:10px的属性的话,那么他们中第...原创 2018-09-12 10:52:18 · 1008 阅读 · 0 评论 -
练习一
实现右侧效果提示:用h1 h2标签,颜色border-color:#cccccc;background-color:#f4f4f4; 整个放在一个div中div.html<html> <head> <title>div</title> <link rel = "stylesh...原创 2018-09-12 10:47:26 · 140 阅读 · 0 评论 -
d3缩放zoom
var svg = d3.select("body") .append("svg") .attr("width", "100%") .attr("height", "100%") .call(d3.zoom().on("zoom", function () { svg.attr("transform", d3.event.transform) })) .append("g")...原创 2019-07-24 10:44:41 · 6604 阅读 · 10 评论 -
简单实现svg的拖拽和缩放
前提此方法限制太多,可能svg使用d3绘制,并且抽象出svg中所有元素的一个参照点和缩放比例svg元素不会太多,否则会造成卡顿。引入最近有个项目需要我帮一下前端,主要是使用d3绘制svg放在页面,其中有一个功能就是对绘制的svg进行拖动和缩放,有点像地图。这里我已经写好了一个方法来绘制svgfunction drawTopo(svg, data, x, y, svgA, radio)...原创 2019-07-20 16:07:01 · 10638 阅读 · 1 评论 -
vue 鼠标坐标
方法介绍关于js鼠标事件获取到坐标的属性总共以下五种: event.clientX/Y event.pageX/Y event.offsetX/Y event.layerX/Y event.screenX/YclientX/YclientX/Y获取到的是触发点相对浏览器可视区域左上角距离,不随页面滚动而改变。兼容性:所有浏览器均支持p...原创 2019-07-20 14:08:23 · 3334 阅读 · 0 评论 -
JavaScript中的toFixed()
一、用法设置浮点数的精度,采用的四舍五入。var a = 1.333;console.log('a:', a.toFixed(2));//a:1.33二、问题toFixed还不同的浏览器实现,在IE10及以上里面是正常的四舍五入,但是别的浏览器里面就不一样了,它不是正常的四舍五入(等下重点说),比如:var a = 1.335;console.log(a.toFixed(2))...原创 2019-01-05 17:20:03 · 27053 阅读 · 3 评论 -
简单说 JavaScript的箭头函数
说明箭头函数本质还是函数,我们来看看他与JavaScript中普通函数的区别,先看看写法上的区别。解释写箭头函数,我们记住一个顺序就好,参数、箭头、函数体、这个顺序记住就足够了,参数、箭头、函数体、这三个是必须的,函数名可以没有,但这三项必须有,一些简写的方式也是简写这三项里的东西。简写1、只有一个参数时,() 可省略//不简写var demo = (x) =&gt;{ c...转载 2018-12-01 11:49:49 · 177 阅读 · 0 评论 -
优化js条件语句
1、使用 Array.includes 来处理多重条件举个栗子 :// 条件语句function test(fruit) { if (fruit == 'apple' || fruit == 'strawberry') { console.log('red'); }}乍一看,这么写似乎没什么大问题。然而,如果我们想要匹配更多的红色水果呢,比方说『樱桃』和『蔓越莓』?我...原创 2018-10-31 21:40:00 · 593 阅读 · 0 评论 -
编写js笔记
写JavaScript经常犯的错误: 1、&amp;lt;script language=&quot;JavaScript&quot;&amp;gt;经常忘记加JavaScript后面的引号原创 2018-09-19 17:27:07 · 162 阅读 · 1 评论