Swiper中文论坛

标题: 在vue中使用swiper，当loop==true时！ [打印本页]

作者: mo4791526 时间: 2019-4-10 19:48
标题: 在vue中使用swiper，当loop==true时！
在vue中使用swiper，当loop==true时！它会复制出6个左右swiper-slide，我页面上只有3个swiper-slide,并且用vue渲染了数据，可以当滑倒另外6个的时候，数据渲染不出来

作者: troublehuan 时间: 2019-4-12 15:44
兄弟把代码粘出来，不然靠猜想也不行

作者: mo4791526 时间: 2019-4-13 15:26

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" >
            
            <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">
            
            <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" >
            
            <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',
})

作者: mo4791526 时间: 2019-4-13 15:41

troublehuan 发表于 2019-4-12 15:44
兄弟把代码粘出来，不然靠猜想也不行

红框是我写的，绿色箭头是复制出来的，滑倒绿色箭头的下表，上面的数据显示不出来

作者: heSwiper 时间: 2019-4-18 10:06
本帖最后由 heSwiper 于 2019-4-18 10:09 编辑

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

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

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

这只是我的看法，仅供参考

作者: 。。。。。。 时间: 2019-8-6 09:53
楼主你的这个问题解决了吗? 我也碰到了这个问题，求解答

欢迎光临 Swiper中文论坛 (http://bbs.swiper.com.cn/)