zoukankan      html  css  js  c++  java
  • Vue 2 使用 swiper

    之前在vue2项目中要用到轮播的功能,用swiper插件实现遇到了一些坑。
    先上结果,运行安装命令:

    npm i swiper@5.x vue-awesome-swiper -s
     

    在main.js文件中加上

    import VueAwesomeSwiper from 'vue-awesome-swiper'
    import 'swiper/css/swiper.css'
    Vue.use(VueAwesomeSwiper)
     

    轮播代码(样式需自己调整):

    // template
    <swiper
          :options="swiperOption"
          @swiper="onSwiper"
          @slideChange="onSlideChange"
    >
            <swiper-slide>123</swiper-slide>
            <swiper-slide>456</swiper-slide>
            <swiper-slide>789</swiper-slide>
            <div class="swiper-pagination" slot="pagination"></div>
            <div class="swiper-button-prev" slot="button-prev"></div>
            <div class="swiper-button-next" slot="button-next"></div>
    </swiper>
    
    // js
    <script>
    export default {
      data () {
        return {
          swiperOption: {
            slidesPerView: 2,
            // 设置分页器
            pagination: {
              el: '.swiper-pagination',
              // 设置点击可切换
              clickable: true
            },
            // 设置前进后退按钮
            navigation: {
              nextEl: '.swiper-button-next',
              prevEl: '.swiper-button-prev'
            },
            // 设置自动轮播
            autoplay: {
              delay: 5000 // 5秒切换一次
            },
            // 设置轮播可循环
            loop: true
          }
        }
      },
      methods: {
        onSwiper () {
    
        },
        onSlideChange () {
    
        }
      }
    }
    </script>
     

    遇到的一些坑:

    默认安装swiper的话,会安装到最新的版本6,最新版本好像是用在vue3上的,vue2用不了
    安装后要引入swiper的css,最新版本的是

     
    import 'swiper/swiper-bundle.css'

    vue2的swiper5的引入是

    import 'swiper/css/swiper.css'



    作者:相维变
    链接:https://www.jianshu.com/p/d2c4393dbea0
    来源:简书
    著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

  • 相关阅读:
    破解 inode 校园网多网卡限制方法
    更改 eclipse的 workplace路径
    VMware Network Adapter VMnet1和VMnet8 未识别的网络的解决方法
    eclipse更改xml文件,txt文件,property文件等文件编辑器的字体设置
    Lua中数组全排序
    Lua尾调用
    C++ 调用Lua简单例子
    linux生成core dump
    vc获取系统日期
    C++培训第一天
  • 原文地址:https://www.cnblogs.com/yc-c/p/15511788.html
Copyright © 2011-2022 走看看