文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

Vue使用Swiper的案例详解

2024-04-02 19:55

关注

Vue使用Swiper看这一篇就够了

此案例实现需求

1、引入swiper

npm i swiper@5.2.0

2、创建轮播图组件CarouselContainer.vue,详细解析在代码注释中

<template>
  <div class="CarouselContainer" @mouseenter="stopAutoPlay" @mouseleave="startAutoPlay">
    <div ref="mySwiper" class="swiper-container" :id="currentIndex"  >
      <div class="swiper-wrapper">
        <div class="swiper-slide my-swiper-slide" v-for="(item,index) of slideList" :key="index">{{item.name}}</div>
      </div>
      <!-- 分页器 -->
      <div class="swiper-pagination"></div>
      <!--导航器-->
      <div class="swiper-button-prev"></div>
      <div class="swiper-button-next"></div>
    </div>
  </div>
</template>
<script>
import Swiper from 'swiper'
import "swiper/css/swiper.css";
export default {
  name: 'CarouselContainer',
  props: ['slideList','currentIndex'],
  data(){
    return {
      currentSwiper:null,
    }
  },
  watch:{
    //slide数据发生变化时,更新swiper
    slideList:{
      deep:true,
      // eslint-disable-next-line
      handler(nv,ov){
        console.log("数据更新了")
        this.updateSwiper()
      }
    }
  },
  mounted() {
    this.initSwiper()
  },
  methods:{
    //鼠标移入暂停自动播放
    stopAutoPlay() {
       this.currentSwiper.autoplay.stop()
    },
    //鼠标移出开始自动播放
    startAutoPlay() {
      this.currentSwiper.autoplay.start()
    },
    //初始化swiper
    initSwiper(){
      // eslint-disable-next-line
      let vueComponent=this//获取vue组件实例
      //一个页面有多个swiper实例时,为了不互相影响,绑定容器用不同值或变量绑定
      this.currentSwiper = new Swiper('#'+this.currentIndex, {
        loop: true, // 循环模式选项
        autoHeight:'true',//开启自适应高度,容器高度由slide高度决定
        //分页器
        pagination: {
          el: '.swiper-pagination',
          clickable:true,//分页器按钮可点击
        },
        on: {
          //此处this为swiper实例
          //切换结束获取slide真实下标
          slideChangeTransitionEnd: function(){
            console.log(vueComponent.$props.currentIndex+"号swiper实例真实下标",this.realIndex)
          },
          //绑定点击事件,解决loop:true时事件丢失
          // eslint-disable-next-line
          click: function(event){
            console.log("你点击了"+vueComponent.$props.currentIndex+"号swiper组件")
          }
        },
        //导航器
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev',
        },
        autoplay: {
          //自动播放,不同版本配置方式不同
          delay: 3000,
          stopOnLastSlide: false,
          disableOnInteraction: false
        },
        slidesPerView: 1, //视口展示slide数1
        slidesPerGroup: 1, //slide数1页一组
      })

    },
    //销毁swiper
    destroySwiper(){
        try {
          this.currentSwiper.destroy(true,false)
        }catch (e) {
          console.log("删除轮播")
        }
    },
    //更新swiper
    updateSwiper(){
      this.destroySwiper()
      this.$nextTick(()=>{
        this.initSwiper()
      })
    },
  },
  destroyed() {
    this.destroySwiper()
  }
}
</script>
<style scoped>
  .CarouselContainer{
    background-color: gray;
  }
  
  .my-swiper-slide{
    height: 300px;
    background-color: pink;
  }
  
  .swiper-container {
    width: 700px;
    border: 1px solid red;
  }
  
  /deep/.swiper-pagination-bullet-active{
    background-color: #d5a72f !important;
    width: 20px;
  }
  
  /deep/.swiper-pagination-bullet{
    background-color: #9624bf;
    opacity: 1;
    width: 20px;
  }
</style>

3、创建父组件App.vue渲染多个swiper组件、模拟异步数据变化

<template>
  <div id="app">
    <!--传递不同的currentIndex 作为区分不同swiper组件的动态id-->
    <CarouselContainer :slide-list="list" currentIndex="1"></CarouselContainer>
    <CarouselContainer :slide-list="list" currentIndex="2"></CarouselContainer>
  </div>
</template>
<script>
import CarouselContainer from './components/CarouselContainer.vue'
export default {
  name: 'App',
  components: {
    CarouselContainer,
  },
  data(){
    return{
      list:[
        {name:"aaa"},
        {name:"bbb"},
        {name:"ccc"},
      ]
    }
  },
  mounted() {
    let self=this
    //延时模拟两次数据变化
    setTimeout(()=>{
      let obj={name:"ddd"}
      self.list.push(obj)
    },5000)
    setTimeout(()=>{
      let obj={name:"eee"}
      self.list[0].name="AAA"
      self.list.push(obj)
    },8000)
  }
}
</script>
<style scoped>
</style>

只需要这两个文件就可以vue项目中运行demo查看效果了

到此这篇关于Vue使用Swiper看这一篇就够了的文章就介绍到这了,更多相关Vue使用Swiper内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯