Beispielcode zur Implementierung von horizontalem Endlos-Scrollen mit reinem CSS3

<Ansichtsklasse="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>
    </Ansicht>
    <view class="imgItem dis-flex" style="animation: {{computedAni}};">
      <image src="../img/{{index + 1}}.jpg" wx:for="{{images}}" mode="aspectFill" wx:key="index"></image>
    </Ansicht>
</Ansicht>

.dis-flex {
  Anzeige: Flex;
  Anzeige: -webkit-flex;
}
.scrollbox {
  Rand: 30px;
  Textausrichtung: zentriert;
  Rand: 1px durchgehend blau;
  Höhe: 220rpx;
  Elemente ausrichten: zentrieren;
  Überlauf: versteckt;
}
.imgItem {
  Animation: 24 s, lineares Aufwärtsrowdown, unendlich, normal;
}
.imgItem-Bild {
  Breite: 200rpx;
  Höhe: 200rpx;
  Rand: 0 20 rpx;
}
@keyframes Zeile nach oben {
  0% {
      -webkit-transform: übersetzen3d(0, 0, 0);
      transformieren: übersetzen3d(0, 0, 0);
  }
  100 % {
      -webkit-transform: translate3d(-100%, 0, 0);
      transformieren: übersetzen3d(-100 %, 0, 0);
  }
}
@-webkit-keyframes rowup {
  0% {
      -webkit-transform: übersetzen3d(0, 0, 0);
      transformieren: übersetzen3d(0, 0, 0);
  }
  100 % {
    -webkit-transform: übersetzen3d(-1000px, 0, 0);
    transformieren: übersetzen3d(-1000px, 0, 0);
  }
}

Seite({
  Daten: {
    Bilder: neues Array(4),
    berechneteAni: ''
  },
  beim Laden: Funktion () {
    dies.setAniSpeed(diese.Daten.Bilder.Länge)
  },
  setAniSpeed(num) {
    let time = Math.ceil(num / 5 * 15) // Hier beträgt die Animationszeit 15 Sekunden, wenn 5 Bilder vorhanden sind. Sie können dies selbst anpassen this.setData({
      computedAni: `${time}s rowup linear infinite normal`
    })
  }
})