【微信小程序】采坑之scroll-view组件

 

1、摘要

　　今天在使用scroll-view组件的时候发现结果跟预想的不同。其实也不是第一次用了，一样的写法却出现了意料以外的效果，因此认定是bug了。博主使用的是2.3.0版本，因此以前的版本应该也会有这个bug。

2、正文

　　先上图

　　这是在scroll-view中添加这么些text组件的时候的效果，代码我就不上了。发现文本组件莫名其妙的被挤下来了一些，我但是没有设置上边距的，并且留白的地方也没有任何东西。

　　通过我苦思冥想以及各类尝试发现把中文换成英文或者数字，结果就不同了。忘记说了，这个scroll-view设置的是x方向滑动。

　　能够发现此次超出的部分没有自动换行了，并且能够左右滑动了，可是留白部分依然存在。

　　我如今的需求是须要用中文，而要能滑动。以前致使没法滑动的缘由是因为文本自动换行形成的。例如第三个text的“文本组件”这四个字居然被分到两行，而后去控制台看布局的时候发现是这样的。

　　厉害了，这文本组件居然变成这样，更奇怪的是尚未影响其它兄弟组件的布局。

　　咋整呐？抱着试一试的心态，我在scroll-view的样式中添加了这么一行代码。

white-space: nowrap;

　　奇迹出现了，看下面的效果。

　　这是我向右边拖动了一点点的效果。相信你们也能看懂上面那行css吧，就是强制不换行的意思。我猜想官方是用div去实现这个scroll-view的，并且没有设置这条属性，因此默认就是自动换行了。

　　咱们再来看下下面这个scroll-view的使用。

　　你们可能跟我同样很奇怪，为啥这个就能够正常滑动呐。这里面我是没有强制不换行的。比较一些这二者的区别就知道为啥了。由于下面这个scroll-view中使用了图片，图片的宽度远远大于文字。并且我把图片和文字放在了一个view中，因此整个view的宽度以图片为主。

3、总结

　　scroll-view中的元素大体分为两类，一类是中文，一类是非中文。使用中文类的组件时候（也就是须要呈现中文的组件，不限于text组件）是会自动换行的，这时候需求在css中强制不换行。在使用非中文组件时候就一切正常。

　　至于为啥使用中文组件会有一部分留白，这个我不知道是个例仍是bug，反正只须要用相对定位移一下就能够了。虽然这不是最好的解决方案，可是目前也没有更好的选择。