純粋な CSS3 で水平無限スクロールを実装するためのサンプル コード

<view class="scrollbox dis-flex">
    <view class="imgItem dis-flex" style="animation: {{computedAni}};">
      <image src="../img/{{index + 1}}.jpg" wx:for="{{images}}" mode="aspectFill" wx:key="index"></image>
    </ビュー>
    <view class="imgItem dis-flex" style="animation: {{computedAni}};">
      <image src="../img/{{index + 1}}.jpg" wx:for="{{images}}" mode="aspectFill" wx:key="index"></image>
    </ビュー>
</ビュー>

.dis-flex {
  ディスプレイ: フレックス;
  ディスプレイ: -webkit-flex;
}
.スクロールボックス{
  マージン: 30px;
  テキスト配置: 中央;
  境界線: 1px 青
  高さ: 220rpx;
  アイテムの位置を中央揃えにします。
  オーバーフロー: 非表示;
}
.imgアイテム{
  アニメーション: 24 秒の rowup 線形無限通常;
}
.imgItem 画像 {
  幅: 200rpx;
  高さ: 200rpx;
  マージン: 0 20rpx;
}
@keyframes 行アップ {
  0% {
      -webkit-transform: translate3d(0, 0, 0);
      変換: translate3d(0, 0, 0);
  }
  100% {
      -webkit-transform: translate3d(-100%, 0, 0);
      変換: translate3d(-100%, 0, 0);
  }
}
@-webkit-keyframes rowup {
  0% {
      -webkit-transform: translate3d(0, 0, 0);
      変換: translate3d(0, 0, 0);
  }
  100% {
    変換: translate3d(-1000px, 0, 0);
    変換: translate3d(-1000px, 0, 0);
  }
}

ページ（{
  データ： {
    画像: 新しい配列(4)、
    計算されたアニ: ''
  },
  onLoad: 関数 () {
    this.setAniSpeed(this.data.images.length)
  },
  setAniSpeed(数値) {
    let time = Math.ceil(num / 5 * 15) // ここでは、画像が 5 枚ある場合のアニメーション時間は 15 秒です。自分で調整できます this.setData({
      computedAni: `${time}s rowup 線形無限通常`
    })
  }
})