一、通用问题

input 的 placeholder 垂直方向不居中问题

解决方案：
input的placeholder会出现文本位置偏上的情况:PC端设置line-height等于height能够对齐,而移动端仍然是偏上,解决方案时是设置css line-height:normal;

  1.   .input{
  2.     line-height:normal;
  3.   }

二、IOS问题

postion:fixed 定位抖动跳屏问题

分析原因：
整个流程就是，当视图容器向上滑动的时候，商品卡片容器需要缓慢移动，首先需要将商品卡片需要脱离标准流，使用scroll-view,设置定位position:fixed 固定定位。然后控制top值来控制滑块的缓慢移动。但是在容器向上滑动的过程中，滑块会出现抖动，闪动的效果。

解决方案：
使用 fixed 定位，因为我们这里需要通过定位，抖动不是单纯fixed定位的原因。和频繁改变top值也有很大关系。放弃改变top值 ，运用transform: translateY来使视图上下移动。

  1. <view class="scroll_box" style={{ transform:`translateY(${ top }px)` }}>   
  2.     <!-- do something... -->
  3. </view>
  4. .scroll_box{ position:fixed;}

最后子元素ios底部设置margin-bottom无效

解决方案：
将margin-bottom改成padding-bottom就能根本的解决问题

屏幕上拉下滑出现空白

手指按住屏幕下拉，屏幕顶部会多出一块空白区域。手指按住屏幕上拉，底部多出一块空白区域。空白区域的颜色，在不同app平台打开，颜色会有差别，嵌入京东app h5中的空白背景色为白色，但是在微信中为灰色。

分析原因：
手指按住屏幕上下拖动，会触发 touchmove 事件。这个事件触发的对象是整个 webview 容器，容器自然会被拖动，剩下的部分会成空白。

解决问题：

  • 方案一：障眼法，套娃模式
    完全可以用整个顶端容器，定位填充整个容器来解决这个问题。这样视图不会跟随上拉下滑而移动。如果空白颜色和背景颜色一致，视觉上就会抵消滑动效果。根本上解决出现空白的问题。
  1. <div id="root" >
  2.   <!-- 此处省略很多内容  -->
  3. </div>
  4.   #root{
  5.     position: fixed;
  6.     left:0;
  7.     top:0;
  8.     bottom: 0;
  9.     right: 0;
  10. }
  • 方案二：监听事件，禁止上滑下滑
    这个问题根本原因是 touchmove 引起的，那么从根本上解决问题，还是要从touchmove这个事件入手。我们需要监听移动端document 的 touchmove然后通过 preventDefault 方法，阻止同一触点上所有默认行为，比如滚动事件。这里要注意的是什么时候，不让滑动，什么时候让滑动。
  1.   <div  ref="root"  ></div>
  2.   const box = this.$refs.root
  3.   box.addEventListener('touchmove',function(e){
  4.       /* 让视图容器正常滚动 */
  5.       e._isScroller = true
  6.   })
  7.   /* 禁止上滑，下滑 */
  8.   document.body.addEventListener('touchmove', function (e) {
  9.       if (e._isScroller) return
  10.       /*  阻止默认事件 */
  11.       e.preventDefault()
  12.   }, {
  13.       passive: false
  14.   })

滑动问题 -webkit-overflow-scrolling : touch 卡顿，不流畅的问题

分析问题：
理解-webkit-overflow-scrolling的两个属性

  1. auto: 使用普通滚动, 当手指从触摸屏上移开，滚动会立即停止。
  2. touch: 使用具有回弹效果的滚动,当手指从触摸屏上移开，内容会继续保持一段时间的滚动效果。继续滚动的速度和持续的时间和滚动手势的强烈程度成正比。同时也会创建一个新的堆栈上下文。

解决问题：

  • 方案一
  1. <div id="app" style="-webkit-overflow-scrolling: touch; ">
  2.   <div style="min-height:101%"></div> 
  3. </div>
  • 方案二
    在webkit-overflow-scrolling:touch属性的下一层子元素上， 将height加1%或1px。从而主动触发scrollbar

三、Android 问题

border-radius：50% 圆角被拉伸问题


分析问题:

  • 在移动端通常会适配不同的手机，所以使用rem布局，，rem 在换算为px时，会是一个带小数点的值，安卓对小于1px的做了处理（不同浏览器对小于1px的处理方式不同，有的采用四舍五入，有的大于某个值展示1px否则就舍去），从而导致圆角不圆；
  • 有的时候我们在给元素设置高度非常小的时候也会出现这个问题，转换成rem的时候，也会出现四舍五入的情况，结果将1px弄没了，变成了0px，于是乎就造成了1px元素无法显示的bug。


解决方案：
把已知视图宽高变成2倍 ,然后用 transform: scale(.5) 让视图缩小50% ,就可以在 android得到很圆的效果。 

  1. .round{
  2.   border-radius:50%;
  3.   width:20px;
  4.   heigth:20px;
  5.   transform: scale(.5);
  6. }
  7. .box{
  8.   width:100px;
  9.   height:2px;
  10.   transform: scaleY(.5);
  11. }