由于刚开始的项目主要用的H5.javaScript技术为主原生开发为辅的手段开发的项目,UI主要是还是H5,如今翻原生.为了方便同时维护两端.才找到这个很不错的库. FlexBox?听起来像是一门H5布局技术.如何应用于原生移动端. 最近时不时的听到关于 FlexBox 的声音,除了在 Weex 以及 React Native 两个著名的跨平台项目里有用到 FlexBox 外,AsyncDisplayKit 也同样引入了 FlexBox . 先说说 iOS 本身提供给我们 2 种布局方式: Fr

前面在做一个H5中用到的6位数字密码弹框(类似支付.微信那种)时,遇到一个可怕问题,那就是在浏览器和安卓中是不显示输入光标的,但是在ios手机上光标总是能看见,像穿透一样地显示最外层. 先说下实现密码框的思路,一般是采用遮挡隐藏一个输入框,然后在输入框的上面该一层一般是一组6个<span>●</span>,然后通过点击布局是让隐藏的输入框获得焦点,最后监听input的textChange,添加对应个数的●,等于6个的时候执行相应的处理. 一开始为了达到input的完全隐藏,可谓下了

在 H5 页面中,会发现在高版本的 IOS 系统中(ios12以上)和微信版本6.7.x以上,都会发现 input 等输入框,输入内容之后发现虚拟键盘消失,但是页面出现大面积白框. 解决办法(最后加上是否是微信浏览器): document.addEventListener('focusout', () => {       setTimeout(() => {         let height = document.documentElement.scrollTop || document

起因 h5的输入框引起键盘导致体验不好,目前就算微信.知乎.百度等产品也没有很好的技术方案实现,尤其底部固定位置的输入框各种方案都用的前提下体验也并没有很好,这个问题也是老大难问题了.目前在准备一套与native协议 来解决这个问题,目前项目中的解决方案还是有值得借鉴的地方的,分享一下 业务场景 固定在h5页面底部的输入框 无论是使用 <input /> 还是 <div contenteditable="true"> </div> 在聚焦事件触发调起

百度前端技术学院第一阶段中的任务十,就是关于flexbox布局的 与flexbox布局相关的资料如下: 1.flex布局教程-语法篇-阮一峰的网络日志  http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html 2.flex布局教程-实例篇-阮一峰的网络日志  http://www.ruanyifeng.com/blog/2015/07/flex-examples.html 3.flexbox详解   https://segmentfaul

失去焦点以后重新设置页面顶部位置 $('input,textarea').on('blur',function(){ window.scroll(0,0); }); $('select').on('change',function(){ window.scroll(0,0); });

$('input,textarea').on('blur',function(){ window.scroll(0,0); }); $('select').on('change',function(){ window.scroll(0,0); });document.body.addEventListener('focusout', function () {window.scrollTo(0, 0);}) 失去焦点后,重新让滚动条滚动到之前的位置 $("input").blur(fu

定义 只读的 localStorage 允许你访问一个 Document 的远端(origin)对象 Storage:数据存储为跨浏览器会话.localStorage 类似于 sessionStorage,区别在于,数据存储在 localStorage 是无期限的,而数据存储在 sessionStorage 会被清除,当页面会话结束时--也就是说当页面被关闭. 属性 length localStorage 内键值对的数量. localStorage.length // 0 localStorag

目录 移动端的点击事件与Sticky Hover问题 TL;DR 前言 问题描述 背景 实现方式 问题 关于移动端浏览器的点击事件 初次发现问题后各种解决尝试:从点击事件本身下手 cursor: pointer 区分设备分别使用click和touchend 问题的根源:CSS中:hover伪类在移动端的表现问题 解决办法 移动端的点击事件与Sticky Hover问题 v1.0 作者:ZBW TL;DR 解决办法是:在:hover伪类外使用@media区分设备,在移动设备上使hover效果不生效

常看到各种app应用中使用自定义的键盘,本例子中使用vue2实现个简单的键盘,支持在移动端和PC端使用,欢迎点赞,h5 ios输入框与键盘 兼容性优化 实现效果: Keyboard.vue <template> <div class="keyboard" v-show="showKeyboard" v-clickoutside="closeModal"> <p v-for="keys in keyList&

# 前言 学习本系列内容需要具备一定 HTML 开发基础,没有基础的朋友可以先转至 HTML快速入门(一) 学习 本人接触 React Native 时间并不是特别长,所以对其中的内容和性质了解可能会有所偏差,在学习中如果有错会及时修改内容,也欢迎万能的朋友们批评指出,谢谢 文章第一版出自简书,如果出现图片或页面显示问题,烦请转至 简书 查看 也希望喜欢的朋友可以点赞,谢谢 了解 React Native 大家都知道,开发原生 App 的成本很高,但是目前基于原生开发仍然是必需的,随着 HTML

# 前言 学习本系列内容需要具备一定 HTML 开发基础,没有基础的朋友可以先转至 HTML快速入门(一) 学习 本人接触 React Native 时间并不是特别长,所以对其中的内容和性质了解可能会有所偏差,在学习中如果有错会及时修改内容,也欢迎万能的朋友们批评指出,谢谢 文章第一版出自简书,如果出现图片或页面显示问题,烦请转至 简书 查看 也希望喜欢的朋友可以点赞,谢谢 更新公告: 更新内容: 新增 github 下载的项目运行不了 这小节(之前忘记写了,抱歉) 了解 React Nativ

背景:在写提交订单页面时候,底部按钮当我点击输入留言信息的时候,底部提交订单按钮被输入法软键盘顶上去遮挡住了. h5 ios输入框与键盘 兼容性优化 实现原理:当页面高度发生变化的时候改变底部button的样式,没点击前button在底部固定position: fixed;当我点击input的时候样式变成position: static!important; 一开始的解决方案是通过input的聚焦和失焦,但是有个问题,当我点击input的时候聚焦,再点击键盘上的隐藏按钮时就没办法恢复原来的fix

why 2020 you should create a new modern website with web fullstack Full-Stack Web Development Front-End Web Development https://website.xgqfrms.xyz/ https://blogs.xgqfrms.xyz/ https://web.xgqfrms.xyz/ skills features twitter shares service workers we

一开始听说开发H5,以为就是做适配现代浏览器的移动网页,心想不用管IE了,欧也.到今天,发现当初too young too simple,兼容IE和兼容安卓与IOS,后者让你更抓狂.接下来数一下踩过的坑.主要分UI展示,键盘,输入框等等.解决bug最苦恼的问题不是没有解决方案,而是你没有找到真正的原因.再就是现象难以重现,每次都要发布代码,然后到手机app中去测试,模拟.这些地方会耗费大量的精力. 一.UI相关 1.安卓4.4以下不支持fixed布局. fixed布局的作用之一就是在手机键盘弹起

1.ios h5 app avalon tap事件失效 使用MUI制作app界面,使用avalon.js渲染数据,发现在(Android上正常)ios上运行时容器div的avalon的ms-on-tap被内容遮住不执行.用MUI的on tap事件可以执行但改动较大,于是改为ms-on-click.(但是click事件有300ms延迟,解决方法在标题2处),搜索到以下解决方法: 解决办法有 4 种可供选择:(来自:https://happycoder.net/solve-ios-safari-cl

现象: 公司正在开发一个iOSAPP,使用h5显示百度地图,但是发现同样的H5页面,在安卓可以显示出来,在iOS中就显示不出来. 原因分析: 但是现在iOS开发中,苹果已经要求在APP中的所有对外连接都要使用HTTPS,但是我们是使用的http. 解决方法: 通过查看百度地图API的官方文档,有如下解决方案 http://lbsyun.baidu.com/index.php?title=jspopular/guide/introduction#Https_.E8.AF.B4.E6.98.8E 申

原生代码中直接加载页面 1.    具体案例 加载本地/网络HTML5作为功能介绍页 2.    代码示例 //本地 -(void)loadLocalPage:(UIWebView*)webView { NSString* htmlPath = [[NSBundle mainBundle]pathForResource:@"demo" ofType:@"html"]; NSString* appHtml =[NSString stringWithContentsOf

IOS的H5页面滑动不流畅的问题: -webkit-overflow-scrolling : touch; 需要滑动的是哪块区域,就在哪里加上这段代码就OK

最近负责公司的微信公众号开发项目,基于H5进行开发,某些页面window.location.href在Android机上能正常运行而IOS系统上无法运行,导致无法重定向到指定页面,查了好久终于找到方法,代码如下 setTimeout( function(){ window.location.href = redirectUrl; }, 0); 如上,只需给window.location.href加一个定时任务即可,亲测可用.

浏览器和app没有通信协议,所以h5不知道用户的手机释放安装了app.因此只能是h5去尝试唤起app,若不能唤起,引导用户去下载我们的app. 微信里屏蔽了 schema 协议,如果在微信中打开h5,则会提示用户在浏览器中打开. HTML代码 <div id="btn"> <a onclick="submitFn ><button>打开app</button></a> </div> js代码 functi