vue-cli3.0移动端使用的轮播插件

前言：

        因为移动端项目的需要，我在项目中经过考虑使用的mint-ui的框架，但是使用他提供的swiper插件以后，感觉坑太多，填不动的感觉，故经过查找并实际测试，发现一款使用挺好的swiper插件 vue-swiper-component

效果图：

步骤：

第一：安装插件

npm i vue-swiper-component

第二：封装好的组件：cswiper.vue

第三：调用方法：

template:

 


js:

import cswiper from '@/components/common/cswiper'         //swiper

components: {
    MSwiper
  },

data:{

    swiperList:[//banner主图数据
         {img_url: require("../../assets/image/demo.png"),title: "文章标题1",id: "1" },
         {img_url: require("../../assets/image/demo.png"),title: "文章标题2",id: "2" },
         {img_url: require("../../assets/image/demo.png"),title: "文章标题3",id: "3" },
         {img_url: require("../../assets/image/demo.png"),title: "文章标题4",id: "4" },
      ],

}

更多资料：

https://blog.csdn.net/qq_42925191/article/details/81904530