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

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/NAMECZ/article/details/84563212

之前用到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;
}

 white-space用法:

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

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

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

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

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

6、inherit: 继承

竖向滑动注意事项：

一定要设置高度！！！