zoukankan      html  css  js  c++  java
  • vue使用插件做轮播图

    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>
  • 相关阅读:
    atitit查询表修改表字段没反应--解锁锁定的表
    atitit.自适应设计悬浮图片的大小and 位置
    .net 科学类型相关问题
    js eval()执行传参函数的写法
    oracle里如何将两个日期的时间差返回**时**分的格式
    .NET开源项目介绍及资源推荐:数据持久层
    highCharts 电流表、电压表
    win7 telnet命令无法使用
    ascx aspx ashx asmx 文件的作用
    Oracle 新建序列值
  • 原文地址:https://www.cnblogs.com/luguankun/p/12630163.html
Copyright © 2011-2022 走看看