淘宝小程序无缝轮播

  <!-- 轮播 -->
  <view style="width:714rpx;height:850rpx;overflow:hidden;position:relative;">
    <swiper style="width:714rpx;height:850rpx;overflow:hidden;">
      <swiper-item>
        <scroll-view catchTouchStart="catchstart" catchTouchMove="catchmove" catchTouchEnd='catchend'>
          <view onTransitionEnd="onTransitionEnd" style="width:{{swiperArr.length*714}}rpx;height:850rpx;display:flex;transform:translateX(-{{current*714}}rpx);transition:all {{duration}}ms linear;">
            <view a:for="{{swiperArr}}" style="width:714rpx;height:850rpx;">
              <view style="width:640rpx;height:850rpx;margin:auto;background-size:100% 100%;background-image:url({{item.image}})">
              </view>
            </view>
          </view>
        </scroll-view>
      </swiper-item>
    </swiper>
    <!-- 小圆点 -->
    <view style="width:714rpx;height:16rpx;display:flex;position:absolute;bottom:20rpx;justify-content:center;">
      <view a:for="{{pointList}}" style="width:{{point == index?80:16}}rpx;height:16rpx;border-radius:{{point == index?'24rpx':'50%'}};background-color:#000;margin:0rpx 8rpx;">
      </view>
    </view>
  </view>

import { enhanceComponent } from 'tb-shop-enhance';

Component(enhanceComponent({
  data: {
    flag: true,
    point: 0,
    duration: 500,
  },

  onInit() {
    // mock数据需要修改client文件夹中的page文件
    // 正常运行过程中模块总是默认传入data参数
  },

  didMount() {
    // 加载成功后可以异步获取数据更新数据展示，例如请求接口等操作
    const { gdc = {}, mds = {}, modUtils } = this.props.data;

    this.setData({
      swiperArr: mds.moduleData.swiperArr,
    });


    let newArr = this.data.swiperArr.concat(this.data.swiperArr.concat(this.data.swiperArr))
    this.setData({
      pointList: this.data.swiperArr,
      current: this.data.swiperArr.length,
      swiperArr: newArr
    })

    if (this.data.autoPlay == 1) {
      this.timer = setInterval(() => {
        this.autoPlay()
      }, this.data.interval * 1000)
    } else {
      clearInterval(this.timer)
    }
  },

  methods: {
    catchmove() { },
    catchstart(e) {
      this.setData({
        start: e.changedTouches[0].clientX
      })

      clearInterval(this.timer)
    },
    catchend(e) {
      // let end = e.changedTouches[0].clientX
      this.setData({
        end: e.changedTouches[0].clientX
      })
      if (this.data.flag) {
        this.setData({
          flag: false
        })
        // 过渡时间
        if (this.data.duration == 0) {
          this.setData({
            duration: 500
          })
        }
        // 索引,小圆点
        if (this.data.start - this.data.end > 20) {
          this.setData({
            current: this.data.current + 1
          })
          if (this.data.point == this.data.swiperArr.length / 3 - 1) {
            this.setData({
              point: 0
            })
          } else {
            this.setData({
              point: this.data.point + 1
            })
          }
        } else if (this.data.end - this.data.start > 20) {
          this.setData({
            current: this.data.current - 1
          })
          if (this.data.point == 0) {
            this.setData({
              point: this.data.swiperArr.length / 3 - 1
            })
          } else {
            this.setData({
              point: this.data.point - 1
            })
          }
        }

        this.time = setTimeout(() => {
          this.setData({
            flag: true
          })
          clearTimeout(this.time)
        }, this.data.duration)
      }
      if (this.data.autoPlay == 1) {
        this.timer = setInterval(() => {
          this.autoPlay()
        }, this.data.interval * 1000)
      } else {
        clearInterval(this.timer)
      }
    },
    onTransitionEnd(e) {
      // console.log(e)
      if (this.data.current == 0) {
        this.setData({
          duration: 0,
          current: this.data.swiperArr.length / 3
        })
      } else if (this.data.current == this.data.swiperArr.length / 3 * 2) {
        this.setData({
          current: this.data.swiperArr.length / 3,
          duration: 0
        })
      }
    },
    autoPlay() {
      if (this.data.flag) {
        if (this.data.duration == 0) {
          this.setData({
            duration: 500
          })
        }
        this.setData({
          flag: false,
          current: this.data.current + 1
        })
        if (this.data.point == this.data.pointList.length - 1) {
          this.setData({
            point: 0
          })
        } else {
          this.setData({
            point: this.data.point + 1
          })
        }

        this.t = setTimeout(() => {
          this.setData({
            flag: true
          })
          clearTimeout(this.t)
        }, this.data.duration)
      }
    }
  },
}));