WeChatミニプログラムがシームレスなスクロールを実現

<view class="wrap-item" style='transform:translateX({{posLeft2}}px)'>
  <view class="messages-scroll firstScroll">
   <view class="{{index == 0?'yanse items':'items'}}" wx:for="{{zhuli}}" wx:key="index">
   <画像 wx:if="{{index == 0}}" src="../../images/xiangq_yonhu_icon_p.png"></画像>
   <画像 wx:if="{{index != 0}}" src="../../images/xiangq_yonhu_icon_n.png"></画像>
   <view>{{index}}{{item.ip}}{{item.str}}</view>
   </ビュー>
  </ビュー>

  <view class="messages-scroll secondScroll" style='transform:translateX({{marginLeft}}px)'>
   <view class="{{index == 0?'yanse items':'items'}}" wx:for="{{zhuli}}" wx:key="index">
   <画像 wx:if="{{index == 0}}" src="../../images/xiangq_yonhu_icon_p.png"></画像>
   <画像 wx:if="{{index != 0}}" src="../../images/xiangq_yonhu_icon_n.png"></画像>
   <view>{{item.ip}}{{item.str}}</view>
   </ビュー>
  </ビュー>
</ビュー>

onShow(){
let windowWidth = wx.getSystemInfoSync().windowWidth; //画面の幅 wx.createSelectorQuery().select('.firstScroll').boundingClientRect(function (rect) {
  let txtLength = rect.width; //テキスト + アイコンの長さ console.log(txtLength)
  コンソール.log(矩形)
  // that.setData({
  // marginLeft: txtLength < windowWidth - that.data.marginLeft ? windowWidth - txtLength : that.data.marginLeft
  // })
  console.log(that.data.marginLeft)
  that.roll2(that, txtLength, windowWidth); //スクロールメソッドを呼び出す}).exec()
},

roll2: 関数 (that, txtLength, windowWidth) {
 var interval2 = setInterval(関数() {
 if (-that.data.posLeft2 < txtLength) {
 that.setData({
 posLeft2: that.data.posLeft2 - that.data.pace
 })
 } else { // 2番目の段落は左にスクロールし、その後再びスクロールします that.setData({
 左位置2: 0
 })
 間隔をクリアします(間隔2);
 that.roll2(that、txtLength、windowWidth);
 }
 }, 20)
},

.wrap-item{
位置: 相対的;
zインデックス: 10;
ディスプレイ: フレックス;
空白: ラップなし;
}

.ブランド情報 .メッセージスクロール {
ディスプレイ: フレックス;
空白: ラップなし;

上マージン: 148rpx;
}

.brand-info .messages-scroll .items {
ディスプレイ: フレックス;
空白: ラップなし;
ボックスのサイズ: 境界線ボックス;
パディング: 0 10rpx;
左マージン: 10rpx;
アイテムの位置を中央揃えにします。
/* 幅: 332rpx; */
高さ: 50rpx;
背景: rgba(0, 0, 0, 0.2);
境界線の半径: 25rpx;
色: #99A4BA;
}

.yanse{
色: #C4FFFD !重要;
}

.brand-info .messages-scroll .items 画像 {
幅: 26rpx;
高さ: 22rpx;
右マージン: 10rpx;
}

.brand-info .messages-scroll .items ビュー {
フォントサイズ: 24rpx;
フォントファミリー: Source Han Sans CN;
フォントの太さ: 400;
}