WeChat-Miniprogramme ermöglichen nahtloses Scrollen

<view class="wrap-item" style='transform:translateX({{posLeft2}}px)'>
  <view Klasse="messages-scroll firstScroll">
   <Ansichtsklasse="{{index == 0?'yanse items':'items'}}" wx:für="{{zhuli}}" wx:key="index">
   <Bild wx:if="{{index == 0}}" src="../../images/xiangq_yonhu_icon_p.png"></Bild>
   <Bild wx:if="{{index != 0}}" src="../../images/xiangq_yonhu_icon_n.png"></Bild>
   <Ansicht>{{index}}{{item.ip}}{{item.str}}</Ansicht>
   </Ansicht>
  </Ansicht>

  <view class="messages-scroll secondScroll" style='transform:translateX({{marginLeft}}px)'>
   <Ansichtsklasse="{{index == 0?'yanse items':'items'}}" wx:für="{{zhuli}}" wx:key="index">
   <Bild wx:if="{{index == 0}}" src="../../images/xiangq_yonhu_icon_p.png"></Bild>
   <Bild wx:if="{{index != 0}}" src="../../images/xiangq_yonhu_icon_n.png"></Bild>
   <Ansicht>{{item.ip}}{{item.str}}</Ansicht>
   </Ansicht>
  </Ansicht>
</Ansicht>

beiAnzeigen(){
let windowWidth = wx.getSystemInfoSync().windowWidth; //Bildschirmbreite wx.createSelectorQuery().select('.firstScroll').boundingClientRect(function (rect) {
  let txtLength = rect.width; //Text + Symbollänge console.log(txtLength)
  console.log(rechtwinklig)
  // dass.setData({
  // linker Rand: txtLänge < Fensterbreite - dieser.Daten.linker Rand ? Fensterbreite - txtLänge : dieser.Daten.linker Rand
  // })
  Konsole.log(das.Daten.Rand links)
  that.roll2(that, txtLength, windowWidth); //Rufen Sie die Scroll-Methode auf}).exec()
},

roll2: Funktion (das, txtLänge, Fensterbreite) {
 var Intervall2 = setzeIntervall(Funktion () {
 wenn (-that.data.posLeft2 < txtLength) {
 dass.setData({
 posLeft2: das.Daten.posLeft2 - das.Daten.Tempo
 })
 } else { // Der zweite Absatz scrollt nach links und dann erneut that.setData({
 posLeft2: 0
 })
 Intervall löschen(Intervall2);
 das.roll2(das, txtLänge, Fensterbreite);
 }
 }, 20)
},

.wrap-item{
Position: relativ;
Z-Index: 10;
Anzeige: Flex;
Leerzeichen: Nowrap;
}

.Markeninfo .Messages-Scroll {
Anzeige: Flex;
Leerzeichen: Nowrap;

Rand oben: 148rpx;
}

.Markeninfo .Messages-Scroll .Items {
Anzeige: Flex;
Leerzeichen: Nowrap;
Box-Größe: Rahmenbox;
Polsterung: 0 10rpx;
Rand links: 10rpx;
Elemente ausrichten: zentrieren;
/* Breite: 332rpx; */
Höhe: 50rpx;
Hintergrund: rgba(0, 0, 0, 0,2);
Randradius: 25rpx;
Farbe: #99A4BA;
}

.yanse{
Farbe: #C4FFFD !wichtig;
}

.brand-info .messages-scroll .items Bild {
Breite: 26rpx;
Höhe: 22rpx;
Rand rechts: 10rpx;
}

.brand-info .messages-scroll .items anzeigen {
Schriftgröße: 24rpx;
Schriftfamilie: Source Han Sans CN;
Schriftstärke: 400;
}