127.移动端踩坑记录

来记录一下自己曾经遇到的移动端踩过的坑。

1.移动端滑动穿透问题，放第一是因为实在太坑！！！

较长，具体可看移动端穿透问题

2.由touch-action引起的移动端横向滑动、纵向滑动失效

有些属性由于不太常用，我们常常没有注意到。
有一次我发现某个区块竟然无法横向滑动，原来原因是别人使用了touch-action:pan-y;

导致只允许纵向的滑动了。

既然遇到了，就不妨看看它还有什么其他的常用属性

touch-action可能的值	具体的效果
none	除了触摸完全无效了。鼠标滚轮还有效果，能滚动。双指放大有效。
pan-y	除了横向操作其他都有效果
pan-x	除了纵向操作其他都有效果
manipulation	允许双方向滚动，允许放大缩小；其余手势忽略
auto	浏览器根据其支持的触控自动添加

完整的属性MDN

3.移动端使用flex布局文字无法实现省略

以下代码是不会超出省略的
html

<div>
  哈哈哈哈哈哈哈哈哈哈或或或或或或哈哈哈哈哈哈哈哈哈哈或或或或或或哈哈哈哈哈哈哈哈哈哈或或或或或或哈哈哈哈哈哈哈哈哈哈或或或或或或
</div>

css

div {
  display: flex;
  align-items: center;
  justify-content: center;
  /* 以下无效了 */
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

有时想要利用flex来快捷地实现文字的垂直居中、水平居中，结果发现这个时候又要超出省略怎么办？？？
这里给出一个简单有效的办法，不知道看官们觉得是否欠妥==？欢迎评论区讨论——
快捷有效的解决方案：再包一层，由里面的那层来做超出省略。

html

<div class="out">
  <div class="inner">
  哈哈哈哈哈哈哈哈哈哈或或或或或或哈哈哈哈哈哈哈哈哈哈或或或或或或哈哈哈哈哈哈哈哈哈哈或或或或或或哈哈哈哈哈哈哈哈哈哈或或或或或或
  </div>
</div>

css

.out {
  display: flex;
  align-items: center;
  justify-content: center;
}
.inner {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

4.移动端better-scroll组件的用法和禁忌

5.如何实现多行省略，以及多行省略中可能存在的文字被遮挡的坑