需求环境

移动端页面（H5 或 小程序）

代码

<view class="box-outer">
  <!-- 这里个数不定，因此这样写，数量确定的话写在css中 -->
  <view class="box-inner" style="width: {{list.length * 20}}%">
    <image wx:for="{{list}}" src="{{item.icon}}"></image>
  </view>
</view>

.box-outer {
  overflow-x: scroll;
  /* overflow-x: auto; 这个也可以，会自动处理为scroll */
  /* overflow-y: hidden; 这个视情况而定 */
}
.box-inner {
  /* 设置列表项间隔，排列属性等，这里宽度需要超出外盒子，单独设置或通过列表项设置都可以，示例为后者 */
  display: flex;
  justify-content: space-around;
}
.card {
  width: 80rpx;
  height: 80rpx;
}

重点：

• 列表项外两层盒子
• 内盒子在外盒子滑动
• 外盒子设置超出滚动
• 内盒子宽度超出外盒子宽度

over