uniapp 使用swiper如何实现匀速轮播图片

在使用 `uni-swiper` 组件时，可以设置 `duration` 属性来控制轮播的速度。默认的 `duration` 值为 500 毫秒，即每张图片之间的切换时间为 0.5 秒。如果要实现匀速轮播，可以先计算出所有图片的总宽度，然后根据总宽度和轮播时间来计算出每一帧应该移动的距离，并设置 `duration` 属性为轮播时间除以总宽度，即可实现匀速轮播。

以下是一个示例代码：

<template>
  <view class="swiper">
    <uni-swiper :duration="duration">
      <uni-swiper-item v-for="(item, index) in items" :key="index">
        <image :src="item.src" />
      </uni-swiper-item>
    </uni-swiper>
  </view>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { src: 'https://example.com/image1.png' },
        { src: 'https://example.com/image2.png' },
        { src: 'https://example.com/image3.png' },
      ],
      duration: 3000, // 轮播时间为 3 秒
    };
  },
  mounted() {
    // 计算所有图片的总宽度
    const width = this.items.reduce((sum, item) => sum + item.width, 0);

    // 计算每一帧应该移动的距离
    const distance = width / (this.duration / 1000);

    // 设置 uni-swiper 组件的 duration 属性
    this.$refs.swiper.duration = distance;
  },
};
</script>