html5与css3
html新特性与实战踩坑
sleeppingfrog
一抹斜阳,一手江湖
展开
-
vue3多页面配置你一定会遇到的问题,踩坑指南
就能正常访问page1,和page2了,展示的内容分别是page1项目和page2项目的app.vue的内容。但是我们的page1和page2项目可不止一个app.vue,我们要通过路由配置不同的路由访问不同的页面。这是我们配置的最原始的一个结构,如图,带+的是新增的文件(文件夹)特别注意新增的page1.html和page2.html,这两个模版文件是一定不能忘记的。我们在page1和page2这两个项目下分别新增了一个views文件夹,用来存放页面,同时新增了一个home和list页面,用来测试。原创 2023-08-11 10:46:40 · 391 阅读 · 0 评论 -
css 踩坑记录
css动画以及css遇到的问题原创 2022-11-16 17:08:36 · 187 阅读 · 0 评论 -
vue3 实现一个简易版日历
vue3 开发一个日历组件原创 2022-09-13 14:49:49 · 2804 阅读 · 4 评论 -
记一次高德地图引入 AMap is not defined 血坑
步骤:1 在pubic文件夹下的index.html中引入高德地图的js文件<scripttype="text/javascript"src="https://webapi.amap.com/maps?v=2.0&key=自己申请的key&plugin=AMap.CitySearch"></script>2 在methods中写一个获取位置的方法getLngLatLocation() { AMap.plugin('AMap....原创 2021-09-24 11:01:22 · 8496 阅读 · 10 评论 -
css3 object-fit
记录下载用object-fit时的踩坑:初始用法:<divclass="box"><imgsrc="./images/avatar.jpg"/></div>-------------------------------------.box{width:240px;height:160px;padding:5px;border:1pxsolid#ccc;overfl...原创 2021-05-21 23:00:37 · 64 阅读 · 0 评论 -
神奇的flex布局
flex布局实现几个常见应用:1 实现两端对齐,从第二行还是左对齐。代码如下:<divclass="box"><divclass="item"></div><divclass="item"></div><divclass="item"></div><divclass="item"></div>...原创 2021-05-15 14:24:33 · 356 阅读 · 0 评论 -
h5 移动端一屏底下内容被遮挡问题
今天碰到一个问题:如图:一个标准的页面。设计稿底部白色区域是200px,上面绿色区域放一张图片。这个简单的布局最初样式如下<div class='wrap'><divclass="imgBoxcenter"><imgv-lazy="imgUrl"alt/></div><divclass="foot"></div></div>.imgBox {100...原创 2020-07-27 16:50:24 · 6916 阅读 · 0 评论 -
微信支付和h5支付详解与示例
2 微信公众号支付的基本逻辑如下 《1》---配置好一个url,直接通过window.location.href的方式访问 ,与此同时会重定向到配置好的redicturl中,微信会给改url自动加上两个参数:code和state 《2》---前端截取到code参数,访问后端接口拿到如下参数 "appId":self.appId, //公众号名称,由商户传入 ...原创 2020-02-08 22:52:57 · 3395 阅读 · 1 评论 -
h5开发滚动顶部导航透明处理
最近有一个小功能,在手机端有一个默认的导航条。默认是透明的,当滚动页面的时候距离超过导航条高度则变为白底。这个功能并不复杂,但是坑却又很多。代码如下:chrome模拟器上毫无问题。但是手机真机测试,除了chrome。其他全部阵亡。到底是什么引起的?查了很多,最后看到了一句话:微信浏览器如果没用x6内核,就会用自带的浏览器内核,自带的不一定兼容es6。那很有可能就是这个...原创 2020-02-05 22:00:48 · 920 阅读 · 0 评论 -
axios里如何优雅的处理网络超时
网络超时的常见表现就是我们请求一个接口如果长时间得不到服务器的响应。就会出现网络中断,报错提示网络超时。在前端项目中,我们一般通过axios的拦截器对后端的请求和响应进行统一处理。网络超时属于返回异常的一种。因此我们需要在拦截器的response中对error进行处理:我们首先设置axios的正常请求的timeouot为4000ms,也就是4秒钟如果得不到服务器响应就会中断。第二步...原创 2019-09-20 12:05:02 · 12427 阅读 · 1 评论 -
vue 动态切换皮肤和主题 篇三
前面介绍了一种动态换肤的方法。主要是通过less-loader的less.modefyVar() 通过动态传参。动态修改less变量达到目的。今天我们将采用另外一种存css的方式实现这种效果:首先我们需要了解下css新的特征:var()函数和:root伪类var()函数可以代替元素中任何属性中的值的任何部分。var()函数不能作为属性名、选择器或者其他除了属性值之外的值。(这样做通...原创 2019-09-17 12:04:45 · 6231 阅读 · 0 评论 -
vant-ui 如何定制主题
定制主题一般发生在我们需要对又有组件颜色都要整体统一时用到。vant在vant/lib/style/var.less中预定义了很多的变量。主要包括一些颜色值和变量名。如图:官方的说明其实写的不够详细。在这过程中遇到了一些坑。主要步骤:-------------------------------------------------------------------------...原创 2019-08-31 16:30:14 · 13906 阅读 · 8 评论 -
html5 FileReader 实现本地图片上传并预览应用实例
1、FileReader接口的方法FileReader接口有4个方法,其中3个用来读取文件,另一个用来中断读取。无论读取成功或失败,方法并不会返回读取结果,这一结果存储在result属性中。 FileReader接口的方法 方法名 参数 描述 readAsBinaryString file 将文件读取为二进制编码 readAsText file,...原创 2018-01-07 20:59:34 · 16396 阅读 · 1 评论