首页 > 其他 > 详细

vue使用插件做轮播图

时间:2020-04-04 09:03:11      阅读:68      评论:0      收藏:0      [点我收藏+]

vue使用 vue-awesome-swiper制作轮播图。

1.访问github,搜索vue-awesome-swiper,查看用法。

第一个坑:github居然访问不了。

解决办法:参考别人 https://www.cnblogs.com/Owen-ET/p/10868620.html

其实访不访问都没关系,照着下面步骤来就可以了。

 

2.安装 vue-awesome-swiper指定版本

第二个坑:必须用这个版本,要不然后面很多bug了。

npm i  vue-awesome-swiper@2.6.7 --save

 

3.在component文件夹里新建Swipe.vuer组件,然后把粘贴下面代码:

<template>
  <div>
    <div class="wrapper">
      <swiper ref="mySwiper" :options="swiperOptions">
        <swiper-slide v-for="(item,i) in picList" :key="i"><img :src="item.src"></swiper-slide>
        <div class="swiper-pagination" slot="pagination"></div>
      </swiper>
    </div>
  </div>
</template>
<script>
export default {
  name: "Swiper", // 此处不能用Swiper作为name,否则报错
  data() {
    return {
      swiperOptions: {
        pagination: ".swiper-pagination", // 轮播图的点
        loop:true, // 循环
      },
      picList:[
          {id:0,src:https://gtms01.alicdn.com/tps/i1/T1Ww_JFEpdXXcZd9sr-640-200.png},
          {id:1,src:https://gw.alicdn.com/imgextra/i3/149/O1CN01wekXPw1CyHZ23AC4R_!!149-0-lubanu.jpg}
      ]
    };
  }
};
</script>

 

/* 图片100% */
.swiper-slide img {
    width: 100%;
}

 

 

父组件引入Swipe.vue

第三个坑:这个新建的Swiper.vue的name不能叫Swiper!!!!!叫别的,比如,HomeSwiper

不然会报下面的错:

技术分享图片

 

 

4.此时,这个轮播图,已经可以滑来滑去了。很开心了么。然后你滑来滑去的时候,居然发现,又有个警告了。

第四个坑:滑来滑去,发现下面这个错误

技术分享图片

 

 解决办法:在App.vue里加上下面的样式。

/* 解决轮播图滑动报错 */
*{touch-action: none;} 

 

5.出现在轮播图上的点,默认是蓝色的,要改成白色比较好看。

第五个坑:直接设置成白色是不行的。。。

解决办法:

<style lang="css" scoped>
 
.wrapper >>> .swiper-pagination-bullet-active{
    background-color: #fff !important;
}
</style>

效果:

技术分享图片

 

 

完整代码:

Swiper.vue

<template>
  <div>
    <div class="wrapper">
      <swiper ref="mySwiper" :options="swiperOptions">
        <swiper-slide v-for="(item,i) in picList" :key="i"><img :src="item.src"></swiper-slide>
        <div class="swiper-pagination" slot="pagination"></div>
      </swiper>
    </div>
  </div>
</template>
<script>
export default {
  name: "HomeSwiper", // 此处不能Swiper作为name,否则报错
  data() {
    return {
      swiperOptions: {
        pagination: ".swiper-pagination", // 轮播图的点
        loop:true, // 循环
      },
      picList:[
          {id:0,src:https://gtms01.alicdn.com/tps/i1/T1Ww_JFEpdXXcZd9sr-640-200.png},
          {id:1,src:https://gw.alicdn.com/imgextra/i3/149/O1CN01wekXPw1CyHZ23AC4R_!!149-0-lubanu.jpg}
      ]
    };
  }
};
</script>
<style lang="css" scoped>
 
.wrapper >>> .swiper-pagination-bullet-active{
    background-color: #fff;
}
/* 图片100% */
.swiper-slide img {
    width: 100%;
}
</style>

App.vue

<style>
/* 解决轮播图滑动报错 */
*{touch-action: none;} 
</style>

 

vue使用插件做轮播图

原文:https://www.cnblogs.com/luguankun/p/12630163.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!