初入前端开发从0到1
机智的奎哥
这个作者很懒,什么都没留下…
展开
-
JS计算两个坐标点之间的距离和角度
JS计算两个坐标点之间的距离和角度原创 2023-05-09 16:52:55 · 2078 阅读 · 1 评论 -
【Echart Bug记录】z / z2 / zlevel of displayable is invalid, which may cause unexpected errors
使用echart遇到的bug,z / z2 / zlevel of displayable is invalid, which may cause unexpected errors原创 2022-07-19 10:42:24 · 5320 阅读 · 2 评论 -
解决微信大字体下H5布局混乱
解决微信大字体下H5页面显示异常原创 2022-07-04 18:21:35 · 256 阅读 · 0 评论 -
微信小程序文字换行符
在微信小程序开发中有一个需求是展示长文本,后端返回的数据包含了\n\n如果将这段文字直接赋值这样并不会换行,具体解决办法如下原创 2022-06-24 16:02:43 · 9427 阅读 · 0 评论 -
如何在h5和小程序中适配iphone X全面屏底部的安全区
1、第一步: h5需要设置页面属性: <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no,viewport-fit=cover">2、在属性样式上加一段判断覆盖样式:.load-more { color: #0080ff; padding-bottom: 32px;}@supports (bottom: const转载 2022-04-21 15:57:43 · 2045 阅读 · 0 评论 -
vue vant上拉加载下拉刷新最佳实践
List 组件可以与 PullRefresh 组件结合使用,实现下拉刷新的效果。<div class='list'> <van-empty v-if="list.length === 0" description="暂无明细" /> <van-pull-refresh v-model="refreshing" @refresh="onRefresh"> <van-list v-mode.原创 2022-04-21 11:59:17 · 1907 阅读 · 0 评论 -
Vue中Html2canvas生成网页局部截图
Html2canvas文档地址npm安装Html2canvasnpm install --save html2canvas项目文件引入Html2canvas(在哪使用就引入到哪)import html2canvas from 'html2canvas'使用(最后可生成png图片)<template> <Button class="ml-3" type="primary" icon="ios-cut"原创 2021-06-25 10:39:29 · 2950 阅读 · 0 评论 -
记录Safari浏览器兼容问题BUG
safari浏览器不支持yyyy-mm-dd这种日期格式,换成yyyy/mm/dd,就没问题。所以手动添加了一个方法转换一下日期格式就可以正常运行了function formatDate(time){ var date = new Date(Date.parse(time.replace(/-/g, “/”))); return date}...原创 2021-06-05 13:38:10 · 507 阅读 · 0 评论 -
前端还原设计稿记录
<script> window.onload = function() { /*375代表设计师给的设计稿的宽度,你的设计稿是多少,就写多少;100代表换算比例,这里写100是 为了以后好算,比如,你测量的一个宽度是100px,就可以写为1rem,以及1px=0.01rem等等*/ getRem(375, 100) }; window.onresize = function() { getRem(375, 100) }; fun..原创 2021-02-24 11:44:58 · 2564 阅读 · 0 评论 -
检测当前浏览器是否为微信内置浏览器——公众号H5开发用
//检查浏览器function checkBrowser() { var ua = navigator.userAgent.toLowerCase(); var isWeixin = ua.indexOf('micromessenger') != -1; if (!isWeixin) { alert("请使用微信浏览器打开!"); }}此方法来自微信官方检测方法...原创 2021-02-22 15:42:48 · 451 阅读 · 0 评论 -
关于<audio>标签及控制的问题
开发框架:Vue需求 :需要音乐在所有页面自动循环播放、不能遮挡fixd在底部的按钮。解决方案:audio标签设置播放器,js控制audio在页面是否隐藏<audio src="音频链接" autoplay="autoplay" loop="loop" controls="controls" class="audio" id="audio"> Your browser does not support the audio element.</audio>原创 2020-09-05 13:00:11 · 1016 阅读 · 0 评论 -
CSS笔记——实现商品划线
效果:实现:text-decoration-line: line-through; // 划线text-decoration-color: #169bd5; // 划线的颜色原理:值 描述 underline 规定文本的下方将显示一条线。 overline 规定文本的上方将显示一条线。 line-through 规定文本的中间将显示一条线。 ...原创 2020-08-31 11:26:02 · 176 阅读 · 0 评论 -
笔记——CSS一行文本超出不换行
width: 100%;overflow: hidden;text-overflow:ellipsis;white-space: nowrap;// 四个属性都写上才能生效原创 2020-08-31 10:18:24 · 166 阅读 · 1 评论 -
CSS实现照片卡片瀑布流布局(两列)
1.问题:今天遇到了需要实现一个卡片的瀑布流布局的问题,卡片高度是不同的。最后使用css3中的column属性实现了这个布局,而且非常的简便啊(lz隐约记得上次写瀑布流的时候是用js实现的…naive啊)实现效果大概如下图~2.实现方法...原创 2020-08-31 09:55:32 · 2358 阅读 · 1 评论 -
JS对字符串的操作(查找,删除,替换)
1.查找let a = this.link.indexOf(''); console.log(a);// 说明// ‘this.link’为被查找的字符串// indexOf()中为你要查找的字符串// 返回值a为查找的字符串在被查找的字符串中的位置下标// 查找失败(没有查找的字符串)返回值为-12.删除、替换this.link = this.link.replace(这里为你要查找的字符串', '这里为查找到后替换为什么');// 说明// 1.注意要重新赋值// 2.‘thi原创 2020-08-28 17:14:12 · 2422 阅读 · 0 评论 -
HTML常用占位符
符号 表示  ; 英文半角空格不换行  ; 英文半角空格不换行  ; 中文全角空格 &ensp; 半角空格  ; 半角空格  ; 全角空格 &emsp; 全角空格  ; 四分之一全角空格  ; 英文半角空格 注意:em是字体排印学的计量单位,相当于当前指定的点数。例如,1原创 2020-08-26 11:44:43 · 3268 阅读 · 0 评论 -
jQuery ajax请求格式
<script type="text/javascript" src="js/jquery-3.5.1.min.js"></script> // 引入jQuery,百度搜索可下载 $.ajax({ type: '', // post或者get url: '', // 请求地址 contentType: 'application/json;charset=utf原创 2020-08-25 17:29:38 · 337 阅读 · 0 评论 -
JavaScript获取日期方法
JS获取日期所有方法方法 描述 getDate() 以数值返回天(1-31) getDay() 以数值获取周名(0-6) getFullYear() 获取四位的年(yyyy) getHours() 获取小时(0-23) getMilliseconds() 获取毫秒(0-999) getMinutes() 获取分(0-59) getMonth() 获取月(0-11) getSeconds() 获取秒(0-59) g原创 2020-08-25 17:22:25 · 258 阅读 · 0 评论 -
HTML radio单选组获取选中元素
需求:获取选中的元素解决方案:// 此为JS方法,使用时直接调取function GetRadioValue(RadioName){ var obj; obj=document.getElementsByName(RadioName); if(obj!=null){ var i; for(i=0;i<obj.length;i++){ if(obj[i].checked){...原创 2020-08-25 15:52:00 · 972 阅读 · 0 评论 -
HTML移动端禁止缩放页面 meta属性(ios和安卓)
1.通用<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />/*width // 设置 viewport 的宽度,正整数/字符串 device-widthheight // 设置 viewport 的高度,正整数/字符串 device-heightinitial-scale.原创 2020-08-25 13:29:44 · 3402 阅读 · 0 评论 -
初入前端开发从0到1——Vue+Vant开发外卖点单项目学习记录(1)
需求:vant的Popup 弹出层只能设置固定高度,无法根据商品卡片数量改变高度。引入import Vue from 'vue';import { Popup } from 'vant';Vue.use(Popup);基础用法<van-cell is-link @click="showPopup">展示弹出层</van-cell><van-popup v-model="show">内容</van-popup>expo.原创 2020-07-24 11:36:32 · 601 阅读 · 0 评论