查看: 263|回复: 4

在vue中使用swiper,当loop==true时!

[复制链接]

该用户从未签到

2

主题

9

帖子

19

积分

新手上路

Rank: 1

积分
19
发表于 2019-4-10 19:48:37 | 显示全部楼层 |阅读模式
在vue中使用swiper,当loop==true时!它会复制出6个左右swiper-slide,我页面上只有3个swiper-slide,并且用vue渲染了数据,可以当滑倒另外6个的时候,数据渲染不出来
回复

使用道具 举报

该用户从未签到

0

主题

1

帖子

3

积分

新手上路

Rank: 1

积分
3
发表于 2019-4-12 15:44:10 | 显示全部楼层
兄弟把代码粘出来,不然靠猜想也不行
回复 支持 反对

使用道具 举报

该用户从未签到

2

主题

9

帖子

19

积分

新手上路

Rank: 1

积分
19
 楼主| 发表于 2019-4-13 15:26:57 | 显示全部楼层
troublehuan 发表于 2019-4-12 15:44
兄弟把代码粘出来,不然靠猜想也不行

html:
<div class="swiper_box">
      <div class="swiper-container">
        <div class="swiper-wrapper">
          <div class="swiper-slide">
            <div class="swiper-slide dividend" data-history="slide1" >
              <!-- @click="openDividedDragon" -->
              <div class="dividend_title">分红龙收益</div>
              <div class="dividend_num">{{IncomeData.fhlProfit}}</div>
              <div class="dividend_text">昨天收益 {{IncomeData.yesterdayFhlProfit}}元</div>
            </div>
          </div>
          <div class="swiper-slide">
            <div class="swiper-slide sumMoney" data-history="slide2">
               <!-- @click="openTotalAmount" -->
              <div class="sumMoney_title">总金额(元)</div>
              <div class="sumMoney_num">{{positiveNum}}<span>.{{moneyDecimal}}</span>
              </div>
              <div class="sumMoney_text">昨天收益{{IncomeData.yesterdayHbAmount}}元</div>
            </div>
          </div>
          <div class="swiper-slide">
            <div class="swiper-slide sunPower" data-history="slide3" >
              <!-- @click="openTotalSl" -->
              <div class="sunPower_title">总算力获得</div>
              <div class="sunPower_num">{{IncomeData.arithForce}}</div>
              <div class="sunPower_text">昨天获得{{IncomeData.yesterdayArithForce}}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
JS:
var swiper = new Swiper('.swiper-container', {
      centeredSlides: true,
      loop: true,
      spaceBetween: 20,
      slidesPerView: 'auto',
    })
回复 支持 反对

使用道具 举报

该用户从未签到

2

主题

9

帖子

19

积分

新手上路

Rank: 1

积分
19
 楼主| 发表于 2019-4-13 15:41:13 | 显示全部楼层
troublehuan 发表于 2019-4-12 15:44
兄弟把代码粘出来,不然靠猜想也不行

1555140150(1).png
红框是我写的,绿色箭头是复制出来的,滑倒绿色箭头的下表,上面的数据显示不出来
回复 支持 反对

使用道具 举报

该用户从未签到

0

主题

3

帖子

9

积分

新手上路

Rank: 1

积分
9
发表于 6 天前 | 显示全部楼层
本帖最后由 heSwiper 于 2019-4-18 10:09 编辑

设置为true 则开启loop模式。loop模式:会在原本slide前后复制若干个slide(默认一个)并在合适的时候切换,让Swiper看起来是循环的。
loop模式在与free模式同用时会产生抖动,因为free模式下没有复制slide的时间点。

这是官网对loop的解释,本来要做无缝轮播就得复制第一个节点,不然就会在播放到最后一个就直接跳到第一个


你设置的    slidesPerView: 'auto', 因为是自动的所有它复制slide的个数就随机了  




这只是我的看法,仅供参考
回复 支持 反对

使用道具 举报

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

本版积分规则

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

GMT+8, 2019-4-24 17:48 , Processed in 0.080022 second(s), 30 queries .

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

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