查看: 5088|回复: 7
打印 上一主题 下一主题

关于swiper3的一个神坑,我认为我没有问题

[复制链接]

该用户从未签到

1

主题

4

帖子

6

积分

新手上路

Rank: 1

积分
6
跳转到指定楼层
#
发表于 2020-11-20 11:51:23 | 只看该作者 回帖奖励 |正序浏览 |阅读模式
1金钱
核心代码这个是轮播图的代码switchSwiper用于切换到指定轮播图的
<img :class="activeIndex == (index+1) ? 'current_chart' : ''" v-for="(pic,index) in masterPicList" :src="pic" :key="index" @click="switchSwiper(index+1)"/>

这个是初始化的代码
this.$nextTick(() => {
          let that = this;
          this.swiper = new Swiper('.swiper-container', {
            autoplay: 2000,
            loop: true,
            onSlideChangeEnd(swiper) {
              that.activeIndex = swiper.activeIndex;
            }
          })
        })
现象:第一轮进行轮播的时候swiper.activeIndex返回的数字是1,2,3,4,5正常顺序,轮播完成后loop:true重新轮播第二次开始就会一直返回2,3,4,5,6。
请教大神这个什么问题?


分享到:  QQ好友和群QQ好友和群 QQ空间QQ空间 腾讯微博腾讯微博 腾讯朋友腾讯朋友
收藏收藏 分享分享 分享淘帖
回复

使用道具 举报

  • TA的每日心情
    开心
    2021-4-1 15:51
  • 签到天数: 1 天

    [LV.1]初来乍到

    0

    主题

    6

    帖子

    16

    积分

    新手上路

    Rank: 1

    积分
    16
    7#
    发表于 2021-4-1 16:03:55 | 只看该作者
    看看看看看看
    回复

    使用道具 举报

    该用户从未签到

    0

    主题

    1

    帖子

    5

    积分

    新手上路

    Rank: 1

    积分
    5
    6#
    发表于 2020-12-31 11:31:15 | 只看该作者
    loop模式下  activeIndex会+1  应该用realIndex
    回复

    使用道具 举报

  • TA的每日心情
    无聊
    2020-12-7 15:28
  • 签到天数: 1 天

    [LV.1]初来乍到

    0

    主题

    2

    帖子

    12

    积分

    新手上路

    Rank: 1

    积分
    12
    5#
    发表于 2020-12-7 15:26:55 | 只看该作者
    添加这个配置项  autoplayDisableOnInteraction : false
    回复

    使用道具 举报

  • TA的每日心情
    开心
    2021-1-7 11:59
  • 签到天数: 1 天

    [LV.1]初来乍到

    0

    主题

    4

    帖子

    27

    积分

    新手上路

    Rank: 1

    积分
    27
    地板
    发表于 2020-11-30 17:46:21 | 只看该作者
    可以换onSlideChangeStart()方法,swiper3的loop选项不是特别好用
    回复

    使用道具 举报

  • TA的每日心情
    开心
    2020-11-27 17:16
  • 签到天数: 1 天

    [LV.1]初来乍到

    0

    主题

    2

    帖子

    5

    积分

    新手上路

    Rank: 1

    积分
    5
    板凳
    发表于 2020-11-27 17:16:52 | 只看该作者
    aaaaaaaaaaaaaaaaa
    回复

    使用道具 举报

    该用户从未签到

    1

    主题

    4

    帖子

    6

    积分

    新手上路

    Rank: 1

    积分
    6
    沙发
     楼主| 发表于 2020-11-20 12:00:20 | 只看该作者
    还有一个现象就是等他自己轮播可以正常轮播,但是只要反向滑动一次轮播就停止了。
    回复

    使用道具 举报

    该用户从未签到

    1

    主题

    4

    帖子

    6

    积分

    新手上路

    Rank: 1

    积分
    6
    楼主
     楼主| 发表于 2020-11-20 11:59:07 | 只看该作者
    那个大神能够給我跳一下这个坑,vue的环境版本"swiper": "^3.4.2"。
    回复

    使用道具 举报

    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    Archiver|手机版|小黑屋|Swiper中文网 ( 粤ICP备15001020号

    GMT+8, 2024-11-22 12:21 , Processed in 0.064762 second(s), 26 queries .

    Powered by Discuz! X3.2

    © 2001-2013 Comsenz Inc.

    快速回复 返回顶部 返回列表