经验总结
共25页,当前第1页
Deshun 发布于 3天前
阅读(26)
赞 (0)
标签 :
Mint
/ 饿了么
/ Mint UI
/ Mint坑
/ Vue
/ picker滑动
/ picker穿透
/ picker滚动
项目在使用饿了么前端团队的 Mint UI 库的 Picker 和 Datetime picker 组件,iOS系统访问时会出现滑动穿透的现象。主要表现在用手指在弹出层触摸滑动时,页面也跟着滚动,严重影响体验。解决方法:1、由于 Picker 组件的滚动是用 touch 事件 + translate 实现的,所以我们可以在 Picker 弹层出现的时候禁止页面的默认滚动机制,Picker 弹层消失...
Deshun 发布于 5天前
阅读(37)
赞 (0)
标签 :
input
/ 输入框
/ 失去焦点
/ 调用键盘
/ 手机弹出键盘
PC端开发使用 Chrome 调试时不会有调用键盘的效果,但是使用手机访问页面时,点击 input 输入框时,会自动聚焦并调用唤起系统键盘(或者说输入法)的。但是我们的需求是 点击 input 时不弹出键盘,可以使用下面的方法实现:$("").focus(function(){
document.activeEleme...
Deshun 发布于 6天前
阅读(50)
赞 (0)
标签 :
x5
/ 腾讯x5内核
/ 浏览器兼容
/ 手机浏览器
/ 移动端兼容
/ H5全屏
华为手机自带的浏览器据说使用的是腾讯X5内核,在测试时发现浏览器默认情况下方会显示一个工具栏,上滑会自动隐藏全屏显示。这种浏览器会把 position: fixed 属性固定定位在下方的元素遮住,无法正常显示。目前我使用小米手机没有发现这样的问题,不知道 iPhone 、OPPO、vivo、魅族、锤子、一加、诺基亚、三星等手机会不会有这样的情况,大家可以自行测试。解决方法:在 head 内添加下面...
Deshun 发布于 1周前 (12-05)
阅读(62)
赞 (0)
标签 :
vue
/ vue返回上一页
/ vue CSS
/ css scope
/ vue样式
/ vue样式跟随
/ vue样式不管用
vue 返回上一页有两种方法:如果使用的是 vue-router ,this.$router.go(-1) 就可以回到上一页。 history.go(-1) 是回到浏览器上一页。但是由于 Vue 应用是单页应用,浏览器的访问历史未必和 Vue 的浏览历史相同。还有一点,就是使用 router 跳转的时候,Vue 不会重新加载 CSS 。比如从 A 页面跳到 B 页面,会沿用 A 页面中的 CSS...
Deshun 发布于 2周前 (11-30)
阅读(110)
赞 (0)
标签 :
Mint
/ 饿了么
/ Element
/ Mint UI
/ 前端框架
/ 前端库
/ Mint坑
/ Vue
Mint UI 是饿了么前端团队(elemeFE)推出的专门针对移动端的前端 UI 库,不过其 github 库已经有2年多没有更新了,API 也不是很详细。不过多评价,还是有很多人用 Element UI的,下面记录一下使用 Mint UI 遇到的问题及解决方法:如何安装我就不再赘述了,大家可以参考官方文档进行安装。讲一下多个 UI 库按需引入吧:我已经配...
Deshun 发布于 2周前 (11-30)
阅读(122)
赞 (0)
标签 :
iphone
/ ios
/ javascript
/ ios页面自动放大
/ input页面放大
/ focus页面放大
最近的一个项目中,发现几个页面在使用 iPhone 11 访问的时候,点击 input 和 textarea 等文本输入框聚焦 focus() 时,页面会整体放大。经检查发现并没有什么特定的功能是让页面放大的,最后找到原因:苹果觉得点击输入框放大是一个“很好”的体验,就擅自把页面给放大了,单纯的用 meta 禁止页面放大是没有用的,可以使用下面两种方法解决。通过 mate 设置:<meta&...
Deshun 发布于 2周前 (11-28)
阅读(99)
赞 (0)
标签 :
ios
/ iphone
/ input
/ 苹果手机input聚焦
/ input focus
/ iphone focus
移动端(iPhone、iPad)的 Safari 或者微信默认是不支持 autofocus 属性的,并且只有用户主动触发的事件才可以使 focus 一类的方法生效。并且在 iOS 中使用 position: fixed 会导致 input 输入框的位置出现问题,导致 input 无法点击或者说无法聚焦。找了几个解决方案,归纳整理一下:1、stackoverflow作者,尝试过模拟点击,触...
Deshun 发布于 3周前 (11-24)
阅读(103)
赞 (0)
标签 :
vue
/ 前端框架
/ antd
/ Ant Design for Vue
/ antd Model
/ antd Modal自定义
最近在使用 Vue 开发一个项目,前端框架用的 Ant Design ,Ant Design for React 已经比较成熟,兼容性和灵活性也比较高。但是 Ant Design for Vue 貌似还有点不那么完善。今天先整理一下 Modal 组件的使用及我开发过程中注意到的一些点。至于 Antd for Vue 存在的 Bug,后期整理到的时候在说吧。A...
Deshun 发布于 4周前 (11-13)
阅读(280)
赞 (0)
标签 :
css
/ 小技巧
/ 代码
/ css虚线
/ css个性化虚线
/ css虚线样式
CSS 的 border 属性,可以设置实线,虚线还有点线。不过直接使用 border: 1px dashed #F00 虚线距离太小,非常难看,很难满足UI图的效果。可以使用 background 背景的渐变属性,来替代 border 方案,方法如下:width: 100%;
height: 1px;
background-image: linear-gradi...
Deshun 发布于 1个月前 (11-06)
阅读(170)
赞 (0)
标签 :
chrome
/ 跨域
/ 跨域问题
/ chrome跨域
/ 服务器跨域
/ 报错
在网站调试对接过程中经常会出现跨域问题,如果无法解决的话,可以设置一下 Chrome ,临时解决跨域问题。添加下面两个参数:--disable-web-security --user-data-dir设置方法:右击 谷歌浏览器快捷方式 -> 属性 -> 在 目标 后面添加上面两个参数,注意参数之间要加空格。然后点击应用和确定按钮。需要关...