微信小程序（10）——利用scroll-view实现横向滚动

这两天想做个小程序上线试试，小程序里需要用到横向滚动，却在做的过程中发现scroll-view即使加了scroll-x，也没有实现横向滚动的效果，于是查找了一下解决方案，解决方案如下：

 

▍解决方案

1、在scroll-view标签上加上样式属性：display: flex; white-space:nowrap；

2、scroll-view标签下的一级栏目标签需要加上样式属性：display: inline-block;

只有结合上面两步，才能实现横向滚动。

 

▍示例

<!-- 下列代码未加规范，仅供参考，请勿模仿 -->
<scroll-view scroll-x style='display: flex;white-space:nowrap;' class=''>
  <view style='width:200rpx;height: 200rpx;display: inline-block;background-color: red;'></view>
  <view style='width:200rpx;height: 200rpx;display: inline-block;background-color: blue;'></view>
  <view style='width:200rpx;height: 200rpx;display: inline-block;background-color: green;'></view>
  <view style='width:200rpx;height: 200rpx;display: inline-block;background-color: orange;'></view>
  <view style='width:200rpx;height: 200rpx;display: inline-block;background-color: yellow;'></view>
  <view style='width:200rpx;height: 200rpx;display: inline-block;background-color: black;'></view>
</scroll-view>

 

▍拓展

如果觉得有一个横向的滚动条存在不太美观，可以访问微信小程序（十一）——去除滚动条。