Input:
1、Focus, h5平台根据各家浏览器决定是否自动聚焦;
2、支付宝无法自动聚焦且ios在支付宝平台发起验证码,键盘没有一键粘贴板;
3、百度在自动聚焦时blur 事件总是先于focus 事件,因此在多个input 存在的情况下,要靠程序自动唤起B input 聚焦,必然会先执行A 的失焦事件,然后再执行B的聚焦事件;
4、不同机型在允许自动聚焦功能的平台上,聚焦和失焦的事件处理也会有差别,ios 普遍失焦事件先于聚焦事件,在频繁地操作聚焦失焦时,ios容易出现键盘的起落问题;
5、ios 在多个input 框存在的情况下点击键盘的一键粘贴,再重新的验证码分配到其他几个input 的情况下,会先触发所有值发生改变的input 的onInput 事件,Android 不会触发其他input 的onInput 事件;
6、ios 在A input 框输入多余的值再删除,然后再删除B input的值,重新聚焦A时, 聚焦的位置不是值的最后面的位置;
7、ios safari 浏览器在自动填充粘贴板的值时会产生黄色背景,会遮挡原本设置的样式, 除非input 的值再次发生变化;
8、多个input或textarea要避免自动唤起聚焦的操作;
9、input慎用绝对定位,在支付宝唤起键盘时,会导致顶部出现空白。
scroll-view:
1、在用到scroll-view的情况下应避免整页刷新,onPulldownRefresh 和onReachBottom, 因为onPulldownRefresh 事件本质上就是对touch事件和scroll的封装,scroll的滚动事件以及自身的refresh 事件是会与uniapp 的onPulldownRefresh 和onReachBottom 发生冲突。
2、scroll-view 的 @scrolltoupper 只要滚动条滚动到顶部就会被触发,要处理下拉刷新必须要使用 @refresherrefresh,并设置开启下拉刷新refresher-enabled = true,设置下拉刷新状态 refresher-triggered = false, refresher-triggered = true 时会触发 @refresherrefresh 事件
3、在开启自定义刷新后,下拉刷新会 触发 @refresherrefresh 事件,@refresherrefresh 事件 也是对touch事件的封装,因此在下拉后调用 @refresherrestore 事件和 @refresherabort 中止 @refresherrefresh 的触发并使下拉得到复位,否则会导致@refresherrefresh 事件一直被触发。
4、scroll-view 的下拉事件还存在平台的兼容性,支付宝平台不支持自定义下拉刷新,看到的下拉效果其实是onPullDown的触发效果。
5、百度小程序在scroll-view 已经挂载的情况下,scroll-view 的内容的height 发生变化,scroll-view 没有重新计算重新滚动高度,会导致scroll-view 的滚动部分失效,需要重新渲染 scroll-view 组件,和重新设置滚动条高度;
6、APP 使用scroll-view 自定义下拉刷新会出现下拉距离过长的问题;
Swiper
1、swiper 会自动生成一个固定高度,默认根据继承或设置的字体大小生成相应的高度,
2、根据情况给swiper 设置一个层级最高的固定高度;
顶部刷新
1、支付宝在已经设置 enablePullDownRefresh = false 的情况下,还是会有顶部下拉刷新效果,应设置禁止下拉 allowsBounceVertical = ‘NO’;
自定义导航栏
1、微信、字节、h5 支持自定义导航栏包括导航栏背景和字体颜色;
2、支付宝自定义有兼容问题:文字完全靠左与返回键重叠切原生返回键无法消除
3、百度兼容:原生返回键无法消除与自定义返回键重叠或错开;
滚动
1、调用onPageScroll 和onReachBottom 的情况下,外层容器不要设置height = 100%; 或给具体的height, 应设置height = auto; 这两个方法监听page 的滚动条变化;
2、在外层容器设置-webkit-overflow-scrolling: touch; 已兼容移动端的触摸滚动;
3、swiper 内部滚动会与页面外层容器的滚动有兼容问题,尽量局部使用swiper 组件;
内部容器:
1、h5平台100vh 包括二级页面头部标题栏和tabbar的高度,要获得准确的页面高度应设置
height = 100%;
或height= calc(100vh - 44px);
或直接调用uni.getSystemInfoSync().windowHeight,
这三种方式根据不同的使用场景使用;
2、针对iphoneX 底部上拉条的位置做兼容时建议设置安全距离,在设置底部安全距离的容器不要在该容器设置与安全距离相同的css样式属性,否则会根据css 优先级,只有层级最大的样式属性生效。
高度
慎用screenHeight
定位
1、慎用fixed , bottom = 0时,ios底部下拉的回弹效果会将底部fixed的元素覆盖,
解决办法: 最外层容器设置overflow = hide;
富文本
1、将富文本中的<section> 标签换成<div>标签,百度、支付宝、字节无法解析该标签;
2、将富文本中的图片style 设置为宽度width:100%;height:auto; ,否则图片无法自适应屏幕宽度;
3、再用html-parser将富文本字符串解析成nodes 模式;
https://github.com/dcloudio/hello-uniapp/blob/master/common/html-parser.js