前端做后台管控系统,在某些接口请求时间过长的场景下,需要防止用户反复发起请求。 假设某场景下用户点击查询按钮后,后端响应需要长时间才能返回数据。那么要规避用户返回点击查询按钮无外乎是让用户无法在合理时间内再次点击按钮。实现方式也有好几种: 1、在按钮点击发起请求后,弹个蒙层,显示个loading,等 ...
分类:
其他好文 时间:
2019-09-15 01:04:08
阅读次数:
115
函数名 popupVisible,我是把这个方法放到vuex里面, 滚动高度用变量top表示 actions 里面commit 该mutations方法: vue页面引用: // 禁止蒙层底部滚动 this.$store.dispatch("hidePass", true); // 允许 this. ...
分类:
其他好文 时间:
2019-08-23 10:33:11
阅读次数:
250
我遇到的问题:在微信浏览器里,点击蒙层的input框,弹出软键盘,蒙层被顶上去,同时input的焦点和button的点击事件也被顶上去了,软键盘消失,蒙层回到原位,但是点击input和button均没反应,点击蒙层被顶上去的位置有反应,因为input的焦点和button的点击事件没回到原位。这个问题 ...
分类:
移动开发 时间:
2019-07-01 14:22:28
阅读次数:
429
相信大家在做移动端开发的时候会经常遇到这种场景,需要适时的弹出遮罩(有时为了突出还会在外面加上蒙层),弹窗出现以后,为了追求良好的用户体验,遮罩以下的屏幕是禁止滑动的。在网上找了很多资料,大体就这两种做法,但都有不完善的地方。加上自己的思考和总结,想到一个办法,应该可以解决你的问题。 a)大众型 一 ...
分类:
其他好文 时间:
2018-12-24 19:48:28
阅读次数:
147
前言 前面两章已经介绍怎么开发一个chrome插件和怎么使用vue搭建一个弹出框的chrome插件,这一章来实现页面元素选择的功能,效果如下图,鼠标放到元素上,元素会高亮: 主要实现思路,创建一个和页面一样宽高的蒙层,监听蒙层的鼠标移动事件,再使用elementFromPoint函数来获得当前鼠标所 ...
分类:
其他好文 时间:
2018-12-17 14:25:26
阅读次数:
130
在写用例的时候,经常会发现某些第一次进去的页面会有一个蒙层提示。我们只有处理掉这个蒙层,才能继续我们的用例; 这边我们使用的是TouchAction的tap方法 ...
分类:
移动开发 时间:
2018-09-30 20:02:51
阅读次数:
277
附上要实现的效果图,如果我截图截的不明显的话,我可以解说下: 中间是获取到一本书的封面,然后背景按获取到的封面平铺,并且模糊,上面还有一层透明度0.65的蒙层 听着是不是很简单,实现起来还是有很多问题的。 html结构代码: 一般人的实现办法是一个div存放内容(指针、转盘、书名、audio操作区等 ...
分类:
Web程序 时间:
2018-08-27 21:57:31
阅读次数:
542
需求:后台给了一个规规矩矩的头像,或圆或方,UI要求展示成水滴的形状。正在想到底如何实现的时候,不由自主去翻了鑫神的博客,正好找到了答案,窃喜(·_·) UI给的形状: 后台给的头像(忽略橙色背景色,我加的...) 最终需要的效果: PS:被覆盖图像的宽高与目标形状图越接近越好 废话不多说,贴代码: ...
分类:
其他好文 时间:
2018-07-27 21:00:35
阅读次数:
172
最近做一个项目,由于用到了竖向swiper,导致占用屏幕过大,用户滑动总是滑动到swiper组件,页面无法向下拉动,于是找各种办法禁止用户手动滑动swiper组件。 经过网上一番查找,网友们也是闹洞大开,各种方法都想出来了,有用透明蒙层覆盖的,这不失为一种很好的解决办法,但是如果swiper上有元素 ...
分类:
微信 时间:
2018-06-20 21:18:39
阅读次数:
5060
第一种简单的方法: 在弹窗出现时,在 html 上添加 class: .open-model { overflow: hidden; height: 100%; } 弹窗消失时,再 remove class 代码示例(react): import React from 'react' import ...
分类:
移动开发 时间:
2018-06-13 19:43:44
阅读次数:
243