loop设置了为什么没有效果

轮了个回 · 发表于 2021-1-30 18:12:11

本帖最后由轮了个回于 2021-1-30 18:13 编辑

<div><font color="#808080" face="Consolas"><template></font></div><div><font color="#808080" face="Consolas"> <div id="r-homePage"></font></div><div><font color="#808080" face="Consolas"> <swiper :options="swiperOption" ref="mySwiper"></font></div><div><font color="#808080" face="Consolas"> <swiper-slide class="swiper-slide" v-for="ele in picData" :key="ele.id"></font></div><div><font color="#808080" face="Consolas"> <el-image class="sam_wh_100" :src="ele.path ? __imgSrc(ele.path) : ''" fit="cover"></font></div><div><font color="#808080" face="Consolas"> <div slot="placeholder" class="image-slot"></font></div><div><font color="#808080" face="Consolas"> <i class="sam_loading"></i></font></div><div><font color="#808080" face="Consolas"> </div></font></div><div><font color="#808080" face="Consolas"> </el-image></font></div><div><font color="#808080" face="Consolas"> </swiper-slide></font></div><div><font color="#808080" face="Consolas"> <div class="swiper-pagination" slot="pagination"></div></font></div><div><font color="#808080" face="Consolas"> <div class="swiper-button-prev" slot="button-prev"></div></font></div><div><font color="#808080" face="Consolas"> <div class="swiper-button-next" slot="button-next"></div></font></div><div><font color="#808080" face="Consolas"> </swiper></font></div><div><font color="#808080" face="Consolas"> </div></font></div><div><font color="#808080" face="Consolas"></template></font></div><div><font color="#808080" face="Consolas">
</font></div><div><font color="#808080" face="Consolas"><script></font></div><div><font color="#808080" face="Consolas">export default {</font></div><div><font color="#808080" face="Consolas"> name: "homePage",</font></div><div><font color="#808080" face="Consolas"> data() {</font></div><div><span style="color: rgb(128, 128, 128); font-family: Consolas;"> return {</span></div><div><font color="#808080" face="Consolas"> picData: [],</font></div><div><span style="color: rgb(128, 128, 128); font-family: Consolas;"> swiperOption: {</span></div><div><font color="#808080" face="Consolas"> loop: true,</font></div><div><span style="color: rgb(128, 128, 128); font-family: Consolas;"> autoplay: {</span></div><div><font color="#808080" face="Consolas"> delay: 5000,</font></div><div><font color="#808080" face="Consolas"> stopOnLastSlide: false,</font></div><div><font color="#808080" face="Consolas"> },</font></div><div><font color="#808080" face="Consolas"> // 显示分页</font></div><div><font color="#808080" face="Consolas"> pagination: {</font></div><div><font color="#808080" face="Consolas"> el: ".swiper-pagination",</font></div><div><font color="#808080" face="Consolas"> clickable: true, //允许分页点击跳转</font></div><div><font color="#808080" face="Consolas"> },</font></div><div><font color="#808080" face="Consolas"> // 设置点击箭头</font></div><div><font color="#808080" face="Consolas"> navigation: {</font></div><div><font color="#808080" face="Consolas"> nextEl: ".swiper-button-next",</font></div><div><font color="#808080" face="Consolas"> prevEl: ".swiper-button-prev",</font></div><div><font color="#808080" face="Consolas"> },</font></div><div><font color="#808080" face="Consolas"> },</font></div><div><font color="#808080" face="Consolas"> };</font></div><div><font color="#808080" face="Consolas"> },</font></div><div><font color="#808080" face="Consolas"> methods: {</font><span style="color: rgb(128, 128, 128); font-family: Consolas;">},</span></div><div><font color="#808080" face="Consolas"> computed: {</font></div><div><font color="#808080" face="Consolas"> swiper() {</font></div><div><font color="#808080" face="Consolas"> return this.$refs.mySwiper.swiper;</font></div><div><font color="#808080" face="Consolas"> },</font></div><div><font color="#808080" face="Consolas"> }</font></div><div><font color="#808080" face="Consolas">};</font></div><div><font color="#808080" face="Consolas"></script></font></div>

复制代码

设置了loop: true 也没有效果，导致autoplay也只自动播放一轮就会停止。

gcb119 · 发表于 2021-2-1 15:53:28

本帖最后由 gcb119 于 2021-2-2 22:38 编辑

  
  <script>
var swiper = new Swiper('.swiper-container', {
   direction: 'vertical',
   loop:false,  //复制多份循环(true/false，这里就是让轮播看起来是循环的，下方disableOnInteraction值为true时此处生效)
   autoplay: { //设定自动播放
      delay: 2500, //自动切换的时间间隔如3000（单位ms）
      disableOnInteraction: true, //点击后打断auto-play，true/false
   },
   pagination: {
      el: '.swiper-pagination',
      clickable: true,
   },
});
  </script>

重点关注注释部分的代码，微信扫码看我的demo

顺便说一句，我的用的最新6.4.5版源码（昨天下午开始学习swiper的，这两天在恶补）

Hoody · 发表于 2021-2-20 16:20:08

vertical 类型的我记得是要设置好高度才可以