微信小程序scroll-view避坑指南

如果我们要在微信小程序中实现横向滑动展示内容的场景，scroll-view是我们的首选，但是在使用中可能会遇到一些问题，我们结合实际案例记录一下注意点。

以横向滚动隐藏滚动条为例，我们需要给元素设置如下属性：

<!-- 元素不使用flex布局-->
<scroll-view  scroll-x="{{true}}" enhanced="{{true}}" show-scrollbar="{{false}}">
<!-- 元素使用flex布局-->
<scroll-view  scroll-x="{{true}}" enhanced="{{true}}" show-scrollbar="{{false}}" enable-flex="{{true}}">

然后编写样式：

scroll-view{
	white-space: nowrap;
}
scroll-view .item{
	display: inline-block; /*子元素的display样式需要设置为inline-x，否则元素不能一行显示。*/
}

/*还有一种方式是给scroll-view设置enable-flex属性，通过flex属性进行控制。可以自行尝试*/

注意点：

1. 属性值用到了那些设置哪些即可；
2. 属性值要用{{}}包裹，尤其是取值为false的情况不这样书写会出现判断异常。例：scroll-x="{{false}}"
3. 如果想让子元素使用flex规则进行布局则需要设置属性enable-flex="true"
4. 给scroll-view设置不换行的样式white-space: nowrap;
5. 给scroll-view包裹的子元素设置inline-x(比如:inline-block inline-flex)的样式，使子元素可以一行显示