vue-awesome-swiper 和swiper 5 结合使用

最新推荐文章于 2024-06-17 02:10:03 发布

一尾鱼汤

最新推荐文章于 2024-06-17 02:10:03 发布

阅读量989

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_42105170/article/details/124927935

版权

本文介绍了如何在Vue项目中结合使用vue-awesome-swiper和swiper5，包括版本对应、配置选项、事件监听以及遇到的问题和解决方法。详细阐述了设置swiperOption、滑动事件回调、自定义CSS样式等方面，特别提到了每个swiper-slide需设定固定高度以正常显示。

摘要由CSDN通过智能技术生成

vue-awesome-swiper 和swiper 5 结合使用总结

和swiper死亡翻滚的一周。。。
版本对应： vue-awesome-swiper：4.1.1 swiper：5.4.5
官网API： http://caibaojian.com/swiper-api/start/new.html

//引入：
 import VueAwesomeSwiper from 'vue-awesome-swiper'
//使用：
 Vue.use(VueAwesomeSwiper)
//该版本引入的css：
 import 'swiper/css/swiper.css'

   <swiper :options="swiperOption" ref="mySwiper"
           :pagination="{ clickable: true }">
        <swiper-slide>
          <div class="nav banner">
            <div class="gear">
              <div class="create_out"><img class="create animated fadeIn" alt="" src="../assets/img/CREATE.png"/></div>
              <div class="gear_out"><img class="gif" alt="" src="../assets/img/gear.gif"/></div>
            </div>
          </div>
        </swiper-slide>
   </swiper>

  let _this = this
  swiperOption: {
        observer: true,
        noSwipingClass : 'scroll-wrap',
        autoResize : false,
     //   direction: 'vertical', 垂直滚动
        slidesPerView: 1,
        slidesPerColumn: 3,  //一页三行
        spaceBetween: 30,
        setWrapperSize: true,
        height: window.innerHeight,
        width: window.innerWidth,
        mousewheel: true,
        pagination : '.pagination',
        paginationClickable :true,
        on: {
          slideChange: function () {
            _this.active = this.activeIndex
            if(this.activeIndex === 1){
              _this.isNavThree = true
              /* 移除active样式，否则 animate 效果只执行一次 */
              setTimeout(()=>{
                _this.isNavThree = false
              },2000)
            }
          },
           //当swiper是最后一页时进入
           reachEnd: function(){
                // 只有一页时不请求分页
                if(_this.activeIndex > 1){
                  _this.loadMore()
                }else {
                  return
                }
            },
            //当swiper视口改变时进入
            resize: function() {
              _this.reRenderSwiper()
            }
        },
      },
methods: {
//跳转到指定页
   slideTo(index){
      this.$refs.mySwiper.$swiper.slideTo(index)
      this.active = index
    },}