w3h5

经验总结 共25页,当前第1页

经验总结

iOS中Mint Picker滑动时页面跟着滚动的解决方法

Deshun 发布于 3天前   阅读(26)   评论(0)   赞 (0)  

项目在使用饿了么前端团队的 Mint UI 库的 Picker 和 Datetime picker 组件,iOS系统访问时会出现滑动穿透的现象。主要表现在用手指在弹出层触摸滑动时,页面也跟着滚动,严重影响体验。解决方法:1、由于 Picker 组件的滚动是用 touch 事件 + translate 实现的,所以我们可以在 Picker 弹层出现的时候禁止页面的默认滚动机制,Picker 弹层消失...

经验总结

移动端手机点击input输入框聚焦不调用键盘的实现方法

Deshun 发布于 5天前   阅读(37)   评论(0)   赞 (0)  

PC端开发使用 Chrome 调试时不会有调用键盘的效果,但是使用手机访问页面时,点击 input 输入框时,会自动聚焦并调用唤起系统键盘(或者说输入法)的。但是我们的需求是 点击 input 时不弹出键盘,可以使用下面的方法实现:$("").focus(function(){     document.activeEleme...

经验总结

华为、荣耀系列手机自带浏览器fixed定位被遮挡的解决方法

Deshun 发布于 6天前   阅读(50)   评论(0)   赞 (0)  

华为手机自带的浏览器据说使用的是腾讯X5内核,在测试时发现浏览器默认情况下方会显示一个工具栏,上滑会自动隐藏全屏显示。这种浏览器会把 position: fixed 属性固定定位在下方的元素遮住,无法正常显示。目前我使用小米手机没有发现这样的问题,不知道 iPhone 、OPPO、vivo、魅族、锤子、一加、诺基亚、三星等手机会不会有这样的情况,大家可以自行测试。解决方法:在 head 内添加下面...

经验总结

vue项目如何实现返回上一页

Deshun 发布于 1周前 (12-05)   阅读(62)   评论(0)   赞 (0)  

vue 返回上一页有两种方法:如果使用的是 vue-router ,this.$router.go(-1) 就可以回到上一页。 history.go(-1) 是回到浏览器上一页。但是由于 Vue 应用是单页应用,浏览器的访问历史未必和 Vue 的浏览历史相同。还有一点,就是使用 router 跳转的时候,Vue 不会重新加载 CSS 。比如从 A 页面跳到 B 页面,会沿用 A 页面中的 CSS...

经验总结

饿了么Mint UI库Datetime picker日期选择器采坑记录

1

Deshun 发布于 2周前 (11-30)   阅读(110)   评论(0)   赞 (0)  

饿了么Mint UI库Datetime picker日期选择器采坑记录

Mint UI 是饿了么前端团队(elemeFE)推出的专门针对移动端的前端 UI 库,不过其 github 库已经有2年多没有更新了,API 也不是很详细。不过多评价,还是有很多人用 Element UI的,下面记录一下使用 Mint UI 遇到的问题及解决方法:如何安装我就不再赘述了,大家可以参考官方文档进行安装。讲一下多个 UI 库按需引入吧:我已经配...

经验总结

IOS、iPhone移动端,表单input聚焦时页面放大的解决办法

Deshun 发布于 2周前 (11-30)   阅读(122)   评论(0)   赞 (0)  

最近的一个项目中,发现几个页面在使用 iPhone 11 访问的时候,点击 input 和 textarea 等文本输入框聚焦 focus() 时,页面会整体放大。经检查发现并没有什么特定的功能是让页面放大的,最后找到原因:苹果觉得点击输入框放大是一个“很好”的体验,就擅自把页面给放大了,单纯的用 meta 禁止页面放大是没有用的,可以使用下面两种方法解决。通过 mate 设置:<meta&...

经验总结

iOS设备input不能自动focus聚焦的解决方法

Deshun 发布于 2周前 (11-28)   阅读(99)   评论(0)   赞 (0)  

移动端(iPhone、iPad)的 Safari 或者微信默认是不支持 autofocus 属性的,并且只有用户主动触发的事件才可以使 focus 一类的方法生效。并且在 iOS 中使用 position: fixed 会导致 input 输入框的位置出现问题,导致 input 无法点击或者说无法聚焦。找了几个解决方案,归纳整理一下:1、stackoverflow作者,尝试过模拟点击,触...

经验总结

记Ant Design Vue Modal组件的使用及踩的坑

2

Deshun 发布于 3周前 (11-24)   阅读(103)   评论(0)   赞 (0)  

记Ant Design Vue Modal组件的使用及踩的坑

最近在使用 Vue 开发一个项目,前端框架用的 Ant Design ,Ant Design for React 已经比较成熟,兼容性和灵活性也比较高。但是 Ant Design for Vue 貌似还有点不那么完善。今天先整理一下 Modal 组件的使用及我开发过程中注意到的一些点。至于 Antd for Vue 存在的 Bug,后期整理到的时候在说吧。A...

经验总结

CSS border dashed属性虚线间隔不可控的解决方法

Deshun 发布于 4周前 (11-13)   阅读(280)   评论(0)   赞 (0)  

CSS 的 border 属性,可以设置实线,虚线还有点线。不过直接使用 border: 1px dashed #F00 虚线距离太小,非常难看,很难满足UI图的效果。可以使用 background 背景的渐变属性,来替代 border 方案,方法如下:width: 100%; height: 1px; background-image: linear-gradi...

经验总结

网站出现跨域问题,Chrome的本地临时解决办法

2

Deshun 发布于 1个月前 (11-06)   阅读(170)   评论(0)   赞 (0)  

网站出现跨域问题,Chrome的本地临时解决办法

在网站调试对接过程中经常会出现跨域问题,如果无法解决的话,可以设置一下 Chrome ,临时解决跨域问题。添加下面两个参数:--disable-web-security --user-data-dir设置方法:右击 谷歌浏览器快捷方式 -> 属性 -> 在 目标 后面添加上面两个参数,注意参数之间要加空格。然后点击应用和确定按钮。需要关...