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
    来源:简书
    著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

  • 相关阅读:
    slqmap简单使用
    Sql注入类型
    路由器协议----IGP、EGP、RIP、OSPF、BGP、MPLS
    TCPIP协议簇-各层主要协议帧格式
    TCP/IP协议(7):应用层
    TCP/IP协议(5):传输层之TCP
    TCP/IP协议(6):传输层之UDP
    Mysql数据库优化之SQL及索引优化
    公众号支付时,如何判断是否是微信浏览器
    ajax返回数据为undefined
  • 原文地址:https://www.cnblogs.com/yc-c/p/15511788.html
Copyright © 2011-2022 走看看