小程序 swiper

最新推荐文章于 2022-10-22 20:48:10 发布

Qjkang

最新推荐文章于 2022-10-22 20:48:10 发布

阅读量176

点赞数

分类专栏：坑文章标签：小程序 swiper

本文链接：https://blog.csdn.net/pandoraqjk/article/details/93724700

版权

坑专栏收录该内容

2 篇文章 0 订阅

订阅专栏

小程序swiper

一，基础配置

<swiper class="swiper-container" indicator-dots="true" autoplay="true" interval="30000" duration="500">
        <block v-for="(item, index) in attrs.data" :key="index">
          <swiper-item class="swiper-item">
            <img :src="item.imageSrc" class="slide-image" mode="aspectFill" :style="imgStyle" @click="onClick({ index })" />
          </swiper-item>
        </block>
      </swiper>

在这里插入图片描述 二、无缝衔接注意
动态绑定interval（自动切换间隔）时 circular（衔接）失效
解决办法： duration（滑动时长）大于 interval

//html
  <swiper :style="itemStyle" :circular="true" :indicator-dots="false" :autoplay="true" :interval="interval" :vertical="true"  :duration="duration" >

//js
  /** 文字滚动间隔 */
    interval() {
      if (!this.attrs.interval) return 2000;
      if (this.attrs.interval < 1000) return 1000;
      if (this.attrs.interval > 5000) return 5000;
      return this.attrs.interval;
    },
    duration(){
      return this.interval + 100;
    },