vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vue-cli中使用swiper

在vue-cli项目中如何使用swiper

作者:吴莉

这篇文章主要介绍了在vue-cli项目中如何使用swiper问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

在vue-cli项目中使用使用swiper

第一步

切换进项目 安装swiper

npm install swiper --save-dev

第二步

创建组件 swiper.vue

导入

import Swiper from "swiper";
@import 'swiper/dist/css/swiper.css';

完整swiper.vue组件

<template>
    <div>
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide">Slide 1</div>
                <div class="swiper-slide">Slide 2</div>
                <div class="swiper-slide">Slide 3</div>
            </div>
        </div>
    </div>
</template>
<script>
    import Swiper from "swiper";
    export default{
        name:"swiper",
        mounted(){
            var mySwiper = new Swiper ('.swiper-container', {
            })        
        }
    }
</script>
<style>
    @import 'swiper/dist/css/swiper.css';
    .swiper-container {
        width: 600px;
        height: 300px;
    }  
</style>

在vue-cli中使用swiper制作水平滑动

在最近项目中,需要完成一个水平滑动选项卡的选择,如果在uni-app中可以直接使用swiper组件完成,但是在vue-cli项目中需要进入swiper插件;但是swiper官网中对于其在vue-cli项目中的使用介绍描述的不太详细,下面将我的使用过程记录下来供大家参考。

1.引入npm install swiper vue-awesome-swiper --save

2.(全局注册)

import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper'
// 如果引入版本 (>= Swiper 6.x)
import 'swiper/swiper-bundle.css'
// 如果引入版本 (<= Swiper 5.x)
import 'swiper/css/swiper.css'
Vue.use(VueAwesomeSwiper, /* { default options with global component } */)

3.页面内注册:

import { Swiper, SwiperSlide, directive } from "vue-awesome-swiper"; //轮播插件
import "swiper/swiper-bundle.css";
components: {
    Swiper,
    SwiperSlide,
  },
  directives: {
    swiper: directive,
  },

4.template文件:

<div class="swiper-container" v-swiper:mySwiper="swiperOption">
         <div class="swiper-wrapper">
                <div class="swiper-slide">
                //单个选项卡内容
                 </div>
         </div>
 </div>

5.js文件

export default{
  data(){
   swiperOption: {
        slidesPerView: 4,//配置每列显示几个选项卡,如果为4,代表100%宽度下会显示4张选项卡,第五个选项需要滑动才能看到
        // ...其他配置项参考swiper中文网
      },
  }
}

此时,页面中的选项卡就可以水平滚动该插件也可以用来做滚动导航Nav,如图:

在这里插入图片描述

结束!

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

您可能感兴趣的文章:
阅读全文