bug解决方法
记录一些实际开发过程中遇到的bug及技巧
前端阿彬
学如逆水行舟,不进则退
展开
-
【bug记录】ios动画闪烁,@keyframe动画在100%的时候设置为opacity:0,最后一帧会变成opacity:1
经过我的观察(下图是闪烁时的效果),很明显是在动画结束后,opacity突然会变成1导致的(动画100%时opacity设为0)。我本来以为可能是动画结束后会先显示下初始状态导致的,但是经过我实验,如果我在动画初始状态设置一些明显的样式,结束后依然只会影响到opacity。我尝试了以下,在保留原本波纹动画的基础上,又新增了一个动画,在99%-100%时将元素位移出屏幕,实际效果非常不好,也可能是我参数设置的不太好;我在动画100%处设置opacity:0的同时,再设置visibility: hidden。原创 2023-08-21 10:40:08 · 431 阅读 · 0 评论 -
【bug记录】translateZ在z轴运动会裁去屏幕外的内容,有个边框(安卓异常,ios正常)
做完之后在电脑上看非常完美,提测之后,发现在安卓手机上,元素由内(translateZ为负值)往外(translateZ变为0)移动时,竟然有个边框,试着改了各种样式没试出来,无奈之下,写了个小demo,只将简单的元素进行z轴移动,发现并没有这问题。效果如下,这是从内到屏幕表面的元素(还有一层是从屏幕表面到屏幕外的元素,为了方便体现效果,我给隐藏了)。思考片刻之后,想到了可能是我设置了元素的blur模糊导致的,果不其然,去掉之后问题解决了!,然后我就瞎改一通,把它的所有父元素都加上了。加强元素的层叠关系。原创 2023-01-12 17:57:56 · 196 阅读 · 0 评论 -
【问题记录】关于ping++支付跳转的回调地址问题(支付宝和微信不一致)
ping++支付:支付宝,微信支付渠道回调地址的注意事项!原创 2022-12-23 16:04:40 · 6991 阅读 · 0 评论 -
【bug解决】ios输入框不能自动聚焦以及聚焦后被键盘遮挡问题的解决办法
前言在做一些评论或者其他类似功能的时候,常常遇到以下两个问题:可能我们要在点击评论图标时,自动聚焦底部的输入框,但是我们发现调用输入框的focus事件不起作用。输入框聚焦后被弹起的键盘遮挡,要往下滑动才能看到输入框解决 setTimeout(() => { //解决第一个问题,myInput是获取到的输入框元素 myInput.value.focus() //解决第二个问题 document.body.scrollTop = do原创 2022-03-04 15:14:48 · 1852 阅读 · 0 评论 -
【vue3】ref获取v-for循环渲染的元素
前言在vue2里我们可以给元素绑定ref属性,然后使用this.$refs.xxx 就可以获取到元素。而在vue3版本中,你可以继续使用vue2的option Api的语法,也可以使用vue2的写法。或者还是用ref绑定元素,然后再setup方法中return 这个ref变量,如下:<div ref="myDom"> </div><script lang="ts">... setup(){ let myDom = ref(null)原创 2022-01-21 16:03:24 · 7466 阅读 · 6 评论 -
【bug解决】ios safari浏览器使用window.open失效
前言在移动端开发中,我们做一些下载文件的功能,经常要用到window.open方法。也就是后端直接返回给你个下载的路径,如果你都浏览器支持预览就会先打开预览,然后自己手动下载,不支持则直接下载。但是再ios系统里,有时会出现window.open方法失效的问题。明明后端返回了地址,但是使用window.open却没有动静。这是为什么呢?原因因为safari浏览器有一些安全策略,禁止在回调函数中执行window.open方法,以防页面不断弹出窗口。例如:有效打开如果你是提前获取了文件地址,然后通过原创 2022-01-13 15:08:06 · 12384 阅读 · 4 评论 -
【bug解决】ios 15 type=“search“ 搜索类型的输入框自带搜索图标
问题在ios端的开发中,用到搜索框时,常常会发现搜索框会多余一个搜索图标,这其实是ios的某些版本,search类型的输入框会自带图标。我们可以用css将其隐掉解决全局css加上 input[type="search"]{-webkit-appearance:none;} [type="search"]::-webkit-search-decoration { display: none; } input::-webkit-search-cancel-button {d原创 2022-01-07 11:15:47 · 2910 阅读 · 2 评论 -
【bug解决】ios cookie不能存中文解决方法
对信息转码进行存取存的时候 setCookie(‘test’,encodeURI(‘测试’))取的时候 var test = decodeURI(getCookie(‘test’))原创 2022-01-07 11:11:09 · 1595 阅读 · 0 评论 -
vue页面中动态修改网站标签名(企业微信自建h5应用顶部导航栏标签名修改)
修改网站标签最近对接企业微信,顶部的固定tabbar应该是企业微信的浏览器头,显示的标题就对应网站的标签名。想要修改此名称,只需要使用 document.title 进行修改。网上有大概三种方法:在页面mouted事件中进行赋值在路由守卫中进行拦截修改自定义指令修改我采用了第二种,写起来方便,代码也相对较少的,看起来舒服。router.beforeEach((to, from, next) => { /* 路由发生变化修改页面title */ if (to.meta.titl原创 2021-08-17 09:22:37 · 1447 阅读 · 0 评论 -
Vue使用svg图标 | uniapp使用svg图标 (以及解决配置了svg-sprite-loader但还是不显示svg图标的问题)
Vue自定义icon-svg组件uniapp自定义iconfont组件打开 https://www.iconfont.cn/ 阿里巴巴图标库,找到需要的图标添加到购物车原创 2021-07-27 10:29:25 · 15054 阅读 · 3 评论 -
vue 移动端页面返回时回到顶部(解决底部fixed在切换页面时闪动) / 回到原先滚动的位置
1.回到顶部第一种方法:router.afterEach((to,from,next) => { window.scrollTo(0,0);});第二种方法: 在创建router实例时,做如下的配置 savedPosition当且仅当通过浏览器的前进/后退按钮触发时才可用const router = new Router({ base: '/', routes, scrollBehavior(to, from, savedPosition) {原创 2021-09-01 09:41:23 · 1577 阅读 · 0 评论 -
【bug解决记录】IOS swipe轮播图设置了圆角,滑动时会变成直角再回到圆角
解决方法:只需要在父盒子上加overflow:hidden 和transform:translateY(0)就好啦 ^ - ^原创 2021-11-05 11:49:19 · 433 阅读 · 0 评论