版权声明:本文为博主原创文章,未经博主允许不得转载。 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: 继承
竖向滑动注意事项:
一定要设置高度!!!