H5
文章平均质量分 64
1
Justin0223
I will be okay
展开
-
H5常规踩坑总结
(一)前言在h5做兼容情况下,我们会遇到很多问题,但是不去总结话,下次遇到相同问题,又会去查询资料,所以这里是平时与遇到h5,踩坑总结的地方(二)主体scrollToscrollTo兼容性替代方案scrollTo支持Safarismoothscroll其他方案animationanimation-delay 负值以及 delay 正值在 iOS 上的坑inputt...原创 2020-03-30 20:23:22 · 384 阅读 · 0 评论 -
纯CSS实现横向滚动条
*(一)前言基于大部分场景,我们需要使用横向滚动,这种时候,大部分会选择swiper来实现,但是其实,我们也可以通过纯CSS的方式实现一个滚动条*(二)实现大家都知道overflow 可以单独设置// 横向滚动overflow-x: scroll;// 纵向滚动overflow-y: scroll;基于上面知识,我们首先来实现一个滚动,<!DOCTYPE html>...原创 2019-12-14 18:16:50 · 4946 阅读 · 1 评论 -
Flexbox在button/fieldset/legend中(比如safair)失效问题
(一)前言常规flex布局,之前就已经介绍过了,那么,其实之前,在封装项目button的问题中,我几乎都是基于div,为其提供loading,disabled,这些效果,但是比较麻烦是,在onClick事件中,我必须为其loading和disbaled的拦截,然后,我尝试了,使用button的disable来为其提供禁用,但是噩梦也由此而来,在使用flex定位内部元素居中时候,测试提供ios 9...原创 2019-11-10 18:31:15 · 278 阅读 · 1 评论 -
谈谈移动端IOS橡皮筋特效
(一)前言对于移动h5应用,会发现进场出现滑动橡皮筋效果,大部分情况下,如果将body设置为滚动条情况下,只要设置html就fixed定位,其实就能解决这个问题,但是大部分产品,会使用局部定位的元素来实现滚动,那么随之问题就会发生。(二)页面元素滚动场景本文解决方案,基本参考下面文章参考链接下面,我来说下,我遇到的问题场景整体页面未使用body作为滚动条内部定义div 为listV...原创 2019-11-10 18:08:11 · 2030 阅读 · 1 评论 -
React Native三端同构(二: webpack@4脚手架构建和项目代码规范)
(一)前言一个完整的web开发手脚架,应该包含以下babel-loader 图片 音视频 字体 样式处理开发环境配置生产多环境scripts配置,流程化前端生产构建生产环境打包优化, 如构建速度,打包外链库,抽离公共模块,页面切片处理(代码内部),git commit 检查规范 和 eslint配置(二)webpack配置新增eslint配置增加webpack配置使用en...原创 2019-02-26 16:08:58 · 1170 阅读 · 0 评论 -
React Native三端同构(一: 基础方案)
(一) 前言React Native 三端(Web、iOS、Android)同构是指在使用 React Native封装组件 的代码下,让其在浏览器中运行出和在 React Native 环境下一样的页面。对于使用 React Native 开发的页面,如果又单独为 Web 平台重复写一份代码代价是极大的,而 React Native 三端同构能以最小代价做到一份代码三端复用。并且也需要提供W...原创 2019-02-25 18:25:05 · 1339 阅读 · 0 评论 -
使用rem构建web h5应用 处理chart 和 app webview 在安卓下错乱问题
前言最早基于手淘做过一次H5 rem适配, 当时基于Hybrid APP。后面使用antd-mobile后,使用 阿里的高清方案。css 新增calc 函数 可以处理边框 配合 flex布局。但是字体大小要额外处理,并且部分安卓机型不支持calc。so,最后我还是决定采用阿里的rem。这也是踩坑的开始内嵌rn webview。我们为三方提供一个H5授权页,用于oAuth2 认证流程。在...原创 2018-09-08 16:48:12 · 1415 阅读 · 0 评论 -
vue移动H5端 -- 微信分享详情页面,结果link为首页
前言在安卓分享详情没这问题,但是ios这边出现分享到首页,猜测是vue-router出的问题,然后,去基佬网(github)逛一圈,发现问题所在, 链接(一)原因IOS:微信IOS版,微信安卓版,每次切换路由,SPA的url是不会变的,发起签名请求的url参数必须是当前页面的url就是最初进入页面时的urlAndroid:微信安卓版,每次切换路由,SPA的url是会变的,发起签名...原创 2018-05-01 22:00:49 · 4428 阅读 · 6 评论 -
Flex布局(三:Flex计算规则)
与弹性盒子计算相关的属性有:margin:外边距flex-grow: 定义项目的放大比例,默认为0flex-shrink: 定义项目的缩小比例,默认为1flex-basis: 定义了在分配多余空间之前,项目占据的主轴空间(main size)。flex: 是flex-grow, ...原创 2018-04-18 00:05:56 · 7159 阅读 · 1 评论 -
移动浏览器,使用h5选取相册和相机
因为浏览器和微信浏览器区别,导致直接使用capture=”camera”,浏览器会调用相机。解决方案,就是在组件加载时候,判断一下内核代码如下<template> <div id="info-container"> <ul class="nav-wrapper"> <li class="head-item">原创 2018-04-07 15:53:14 · 2075 阅读 · 0 评论 -
fastclick.js在点击一个可输入的div时,ios无法正常唤起输入法键盘
前言为了提升移动端click的响应速度,使用了fastclick.js这么一个库。这个库导致这个可编辑的div被点击无法轻松的唤起输入法。 长按才能成功。div的一个contentEditable=”true”解决方案首先:再你的编辑器中增加一个class属性。我用的是quilljs<div id="editor" class="needsclick">&...原创 2018-04-07 15:11:29 · 3054 阅读 · 0 评论 -
Flex布局(二:项目属性)
前言flex项目常用属性为6个order: 定义项目的排序顺序,默认为0flex-grow: 定义项目的放大比例,默认为0flex-shrink: 定义项目的缩小比例,默认为1flex-basis: 定义了在分配多余空间之前,项目占据的主轴空间(main size)。flex: 是flex-grow, flex-shrink 和 flex-basis的简写,默认值为0 1 aut...原创 2018-01-06 15:39:49 · 1350 阅读 · 0 评论 -
Flex布局(一:基本概念和容器属性)
前言算上来快2个月没写博客呢,一是赶项目,二是中途接到一个朋友公司需要帮忙,周末都在TA们公司兼职,然后空下来就快12月初(1)Flex传统的布局方案,基于css盒子模型,float+display+position,...原创 2017-12-24 00:02:25 · 20968 阅读 · 9 评论 -
Flexible实现手淘H5页面的rem布局适配
项目加上了缩放比例, 但是ionic本身很多组件都是px的 然后配合px2rem将ui库的px转化为rem原创 2017-09-13 11:46:35 · 18529 阅读 · 0 评论 -
移动布局rem
方案一 如果现在还不知道rem的 请转道自行谷歌/百度。 使用步骤:(以750的iPhone6为基数)原创 2017-08-20 17:59:05 · 549 阅读 · 0 评论