过程和现象

本来以为直接使用scroll-view构造横向滑动 scroll-x设置为true 并且给一个固定宽度就可以了 但事实并没有那么简单

首先遇到的问题是所有的子元素自动换行了！
给所有子元素加上 inline-block 或 inline-flex 嗯 好多了

但是在所有子元素的宽度相加超过一行的情况下 每个子元素的下级元素还是会换行 也就是说 现在父元素scroll-view的宽度是固定宽度 而且允许换行

最后 给父元素也就是scroll-view组件加一个 white-space: nowrap 不允许内容或子元素换行 OK完成了！

总结结论

达到横向滑动的条件

1.父元素scroll-view有固定宽度 scroll-x设置为true
2.scroll-view 不允许内容或子元素换行 设置css属性 white-space: nowrap
3.子元素设置为行内元素
4.如果子元素还有下级元素的话 保证子元素的下级元素也保持在子元素预置的区域内 如果子元素下面还有多个多级元素 可以尝试用inline-flex或其他方法令其不换行 不超出元素范围

其实 swiper也可以实现横向滑动 但是占滑动距离固定 而且swiper配置也比较麻烦 占用资源多没必要大材小用