zoukankan      html  css  js  c++  java
  • vue添加swiper的正确方式亲测---切图网

    在vue项目中,我们在做图片轮播的方式和传统切图不同,传统切图中我们一般采用非常强大的swiper来完成,而在vue中一般依赖vue-awesome-swiper组件来完成(vue-awesome-swiper其实就是基于swiper4封装的vue插件,所以如果你刚好熟悉swiper.js插件的话,基本你都能看明白)。亲测有用,按照下面方法执行即可成功,方法如下:

    1,安装组件通过命令行

    npm install swiper
    

    2,在main.js添加

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

    3,在当前页添加

    import Swiper from 'swiper';
    import 'swiper/dist/css/swiper.min.css';
    

    4,在当前页data里面添加

    swiperOption: {
    pagination: {
    el: '.swiper-pagination',
    clickable :true
    },
    paginationClickable: true,
    autoplay: 2500,
    autoplayDisableOnInteraction: false,
    loop: false,
    coverflow: {
    rotate: 30,
    stretch: 10,
    depth: 60,
    modifier: 2,
    slideShadows : true
    }
    },
    

    5,当前页添加

    <swiper class="h-view" :options="swiperOption">
    <swiper-slide v-for="(item,index) in bigPic" v-if="index<4 ">
    <router-link :to="{path:'/Knowledge_detail', query:{contentId: item.contentId}}">
    <div class="img">
    <img :src="item.bigImgUrl ? item.bigImgUrl : 'imgs/img01.jpg'"/>
    </div>
    
    </router-link>
    </swiper-slide>
    <div class="swiper-pagination" slot="pagination"></div>
    </swiper>
  • 相关阅读:
    Linux Vim编辑器
    Linux sed 流编辑器
    Shell 编程 (变量和条件测试)
    Linux 下 Bash配置文件读取
    Linux 用户、权限
    Linux 指令(一)文件/目录操作
    Ubuntu 下安装 Swoole
    Mysql IN语句查询
    Mysql 查询优化
    Mysql 获取表属性
  • 原文地址:https://www.cnblogs.com/pwindy/p/12290066.html
Copyright © 2011-2022 走看看