Seamless Infinite Scrolling Images in WeChat Mini Program

<view class="container"> <view class="scroll-container"> <view class="scroll-content" style="animation-duration: {{animationDuration}}s;"> <block wx:for="{{images}}" wx:key="index"> <image class="item" src="{{item}}" /> </block> </view> </view> </view> 微信小程序上面结构，实现图片无线循环左移，并无缝衔接

要在微信小程序中实现图片的无线循环左移，并且无缝衔接，你可以使用CSS动画和JavaScript来实现。以下是一个示例代码，展示了如何实现这个效果。

WXML (页面结构)

<view class="container">
  <view class="scroll-container">
    <view class="scroll-content" style="animation-duration: {{animationDuration}}s;">
      <block wx:for="{{images}}" wx:key="index">
        <image class="item" src="{{item}}" />
      </block>
      <!-- 复制一份图片列表用于无缝衔接 -->
      <block wx:for="{{images}}" wx:key="index">
        <image class="item" src="{{item}}" />
      </block>
    </view>
  </view>
</view>

WXSS (样式)

.container {
  width: 100%;
  overflow: hidden;
}

.scroll-container {
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
}

.scroll-content {
  display: inline-block;
  white-space: nowrap;
  animation: scroll-left linear infinite;
}

.item {
  display: inline-block;
  width: 100px; /* 根据需要调整图片宽度 */
  height: 100px; /* 根据需要调整图片高度 */
}

@keyframes scroll-left {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

JS (页面逻辑)

Page({
  data: {
    images: [
      'https://example.com/image1.jpg',
      'https://example.com/image2.jpg',
      'https://example.com/image3.jpg',
      // 添加更多图片URL
    ],
    animationDuration: 10 // 动画持续时间，单位为秒
  }
});

解释

1. WXML:

   • scroll-content 包含两份图片列表，这样可以实现无缝衔接。
   • 使用 wx:for 循环来动态生成图片列表。

2. WXSS:

   • scroll-content 使用 animation 属性来实现左移动画。
   • @keyframes scroll-left 定义了从 0% 到 100% 的动画效果，transform: translateX(-50%) 表示移动到一半的位置（因为我们有两份图片列表）。

3. JS:

   • images 数组包含了图片的URL。
   • animationDuration 定义了动画的持续时间，可以根据需要调整。

通过这种方式，你可以实现图片的无线循环左移，并且无缝衔接。你可以根据需要调整图片的宽度、高度和动画持续