【微信小程序】scroll-view 注意事项

之前用到scroll-view的时候踩过一次坑，解决后，觉得不是什么很深的坑，遂没有做记录，结果这次又用到了，同一个坑又掉进去一次，心里很难受，难受我没长脑子，也难受我眼高手低，所以这一次，我决定记录下来，给自己一个警醒！

横向滑动注意事项：

1、scroll-view 中使用float无效；

2、scroll-view 中使用flex依然无效；

3、scroll-view 样式中使用子元素选择器无效 比如：scrollBox>view 等，需标明class名称；

4、scroll-view 中需要滑动的元素应该使用 display：inline-block，来使元素横向排版；

5、scroll-view 要设置明确的宽并且加上以下样式：(该样式会导致内部文本无法换行问题)

{
  overflow:hidden;
  white-space:nowrap;
}

6、scroll-view 内部因 white-space: nowrap 样式无法换行问题解决办法：

      在需要换行的文本上设置 white-sapce: normal（换行成功，但样式错乱）

      在 scroll-view 下的第一个元素上加上 overflow：hidden 解决样式错乱问题

      ios下存在标签高低不一的兼容性问题可加上 vertical-align: top 解决

<scroll-view>
    <view style="overflow:hidden;vertical-align: top">
        <text style="white-space: normal">需要换行的文本</text>
    </view>
</scroll-view>

 white-space用法:

1、normal: 正常无变化(默认处理方式.文本自动处理换行.假如抵达容器边界内容会转到下一行)

2、pre: 保持HTML源代码的空格与换行,等同与pre标签

3、nowrap: 强制文本在一行,除非遇到br换行标签

4、pre-wrap: 同pre属性,但是遇到超出容器范围的时候会自动换行

5、pre-line: 同pre属性,但是遇到连续空格会被看作一个空格

6、inherit: 继承

竖向滑动注意事项：

一定要设置高度！！！