精华内容
下载资源
问答
  • vue swiper自定义分页器 var swiper = new Swiper(".feature", { .... //前进后退后自动播放 //用户操作swiper之后,是否禁止 autoplay 。默认为true:停止。 autoplayDisableOnInteraction: false, //分页器 ...

    下载 使用 swiper

    cnpm i swiper@3.4.2 --save-dev

    main.js 中

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

    vue swiper自定义分页器

     var  swiper = new Swiper(".feature", {
            ....
            //前进后退后自动播放
            //用户操作swiper之后,是否禁止 autoplay 。默认为true:停止。
            autoplayDisableOnInteraction: false,
            //分页器 
            pagination: ".swiper-pagin",
            paginationClickable: true,  //点击分页器 进行切换swiper
            
            //以下 自定义分页器  类名默认 swiper-pagination-bullet  ,
            // active类名默认· swiper-pagination-bullet-active
            paginationBulletRender: function (swiper, index, className) {
              console.log(className); //默认类名 swiper-pagination-bullet
              return '<div class="' + className + '"></div>';
            },
          });
    

    css样式 ()

    父类名 /deep/ .swiper-pagination-bullet {
      height: 0.1rem;
      width: 0.025rem;
      background-color: #000;
      display: inline-block;
      margin-right: 0.1rem;
      opacity: 1;  //默认样式有透明度,这里修改了
      transition: all 0.25s; //swiper分页器过渡效果
    }
    //当前swiper对象 css样式
    父类名 /deep/ .swiper-pagination-bullet-active {
      height: 0.16rem;
    }
    

    效果(高度上的改变)
    在这里插入图片描述

    展开全文
  • 这是我在做高仿小米商城项目中遇到的bug,刚开始直接在vue ui中的依赖中直接下载的vue-awesome-swiper,会直接给我下载最新的版本,报错,于是就去 swiper 官方文档按照步骤下载,结果安装之后也是一路报错啊,卸了...

           这是我在做仿小米商城项目中遇到的bug,刚开始直接在vue ui中的依赖中直接下载的vue-awesome-swiper,会直接给我下载最新的版本,报错,于是就去 swiper 官方文档按照步骤下载,结果安装之后也是一路报错啊,卸了好几次 node_moduls,经多次查找方法,最终总结如下:

    1、不能按照官方文档里安装 npm i swiper ,采用这个方法安装的会是最新的版本,导致安装失败

    解决方法:安装 vue-awesome-swiper@3.1.3 成功

    2、引入 swiper插件错误而报错:

    错误引入:

    import { Swiper, SwiperSlide } from "swiper/vue";

    于是出现以下错误提示:

    解决方法:正确引入方式是(采用解构赋值的方式按需引入)

    import { Swiper, SwiperSlide } from "vue-awesome-swiper";

    3、引入swiper.css文件 报错

    错误引入:

    import "swiper.css";

    报错,找不到这个文件:

    解决方法:

    import "swiper/dist/css/swiper.css";

     问题成功解决

    4、由于下载的是 vue-awesome-swiper": "^3.1.3"版本,然后引用时用成了 "swiper",

    还会报这样的错误:

    解决方法:

    首先,检查一下自己安装的哪个版本的swiper 

    如果下的是:"vue-awesome-swiper": "^3.1.3",

    那么就引入:import { Swiper, SwiperSlide } from "vue-awesome-swiper";

    5、报错:TypeError: Cannot set property 'params' of undefined"

     解决办法
    @3.x 版本的 ---- 引入模块时使用小写
    import { swiper, swiperSlide } from “vue-awesome-swiper”;
    @4.x 版本的 ---- 引入模块时使用大写
    import { Swiper, SwiperSlide } from “vue-awesome-swiper”;
    我是3.1.3版本的改成小写的好使了
     

    最后附上我完成的memo

    <template>
      <div class="index">
        <div class="container">
          <!-- 轮播 start -->
          <div class="swiper-box">
            <swiper :options="swiperOption">
              <swiper-slide v-for="item in sliderList" :key="item.id">
                <a :href="'/#/product/' + item.id">
                  <img :src="item.img" />
                </a>
              </swiper-slide>
              <!-- 设置分页及左右两边的箭头 -->
              <div class="swiper-pagination" slot="pagination"></div>
              <div class="swiper-button-prev" slot="button-prev"></div>
              <div class="swiper-button-next" slot="button-next"></div>
            </swiper>
          </div>
          <!-- 轮播 end -->
    
          <!-- 广告位 start-->
          <div class="ads-box"></div>
          <!-- 广告位 end-->
    
          <!-- 横幅广告 start-->
          <div class="banner"></div>
          <!-- 横幅广告 end-->
    
          <!-- 商品列表 start -->
          <div class="product-box"></div>
          <!-- 商品列表 start -->
        </div>
        <service-bar></service-bar>
      </div>
    </template>
    
    <script>
    import ServiceBar from "../components/ServiceBar.vue";
    // 导入轮播图插件
    import { swiper, swiperSlide } from "vue-awesome-swiper";
    // // 其实当前目录下没有,但是它自己会去node module模块里面查找
    import "swiper/dist/css/swiper.css";
    export default {
      name: "index",
    
      data() {
        return {
          // 轮播图的选项
          swiperOption: {
            // 设置循环,自动播放
            autoplay: true,
            // 设置循环点击(否则当点到最后一张就点不动了)
            loop: true,
            // 设置动画
            effect: "cube",
            // 设置动画的一些参数
            cubeEffect: {
              slideShadows: true,
              shadow: true,
              shadowOffset: 100,
              shadowScale: 0.6,
            },
            // 指定分页器是哪一个
            pagination: {
              el: ".swiper-pagination",
              clickable: true,
            },
            // 设置前进后退的按钮(可点击跳转)
            navigation: {
              nextEl: ".swiper-button-next",
              prevEl: ".swiper-button-prev",
            },
          },
          sliderList: [
            {
              id: "42",
              img: require("../../public/imgs/slider/slide-1.jpg"),
            },
            {
              id: "45",
              img: require("../../public/imgs/slider/slide-2.jpg"),
            },
            {
              id: "46",
              img: require("../../public/imgs/slider/slide-3.jpg"),
            },
          ],
        };
      },
      components: {
        swiper,
        swiperSlide,
        ServiceBar,
      },
    };
    </script>
    <style lang="scss" scoped>
    .index {
      .swiper-box {
        .swiper-container {
          height: 451px;
          img {
            width: 100%;
          }
        }
      }
    }
    </style>
    
    
    
    
    

    了解更多swiper功能,可查看swiper中文网官方文档:

    https://www.swiper.com.cn/api/pagination/69.html 

    展开全文
  • Vue使用Swiper插件

    2021-08-24 18:01:51
    Vue使用Swiper插件 这里直接封装,方便后边使用 Swiper.vue <template> <div class="swiper-container"> <div class="swiper-wrapper"> <slot></slot> </div> <!-- ...

    Vue使用Swiper插件

    这里直接封装,方便后边使用

    Swiper.vue

    <template>
      <div class="swiper-container">
        <div class="swiper-wrapper">
          <slot></slot>
        </div>
        <!-- 如果需要分页器 -->
        <div class="swiper-pagination"></div>
        
        <!-- 如果需要导航按钮 -->
        <template v-if="!btnCustom">
          <div class="swiper-button-prev"></div>
          <div class="swiper-button-next"></div>
        </template>
        <template v-else>
          <div class="custom-button button-prev" v-if="$slots['button-prev']">
            <slot name="button-prev"></slot>
          </div>
          <div class="custom-button button-next" v-if="$slots['button-next']">
            <slot name="button-next"></slot>
          </div>
        </template>
        
        <!-- 如果需要滚动条 -->
        <!-- <div class="swiper-scrollbar"></div> -->
      </div>
    </template>
    
    <script>
    import Swiper from 'swiper/bundle';
    import "swiper/swiper-bundle.min.css";
    
    export default {
      name: 'Swiper',
      props: {
        // 上一张 / 下一张 按钮是否自定义,值为false,自定义无效
        btnCustom: {
          type: Boolean,
          default: false
        }
      },
      
      mounted() {
        let navigation = {
          prevEl: this.btnCustom ? '.button-prev' : '.swiper-button-prev',
          nextEl: this.btnCustom ? '.button-next' : '.swiper-button-next',
        };
        new Swiper ('.swiper-container', {
          loop: true,
          loopAdditionalSlides: 1,
          autoplay: true,
          pagination: {
            el: '.swiper-pagination',
            clickable: true
          },
          navigation
        })
      },
    }
    </script>
    
    <style>
    .swiper-pagination-bullet {
      /* 这里设置分页器未激活的颜色 */
      background: black;
    }
    
    .swiper-pagination-bullet-active {
      /* 这里设置分页器激活的颜色 */
      background: red;
    }
    
    /* 以下为自定义btn按钮的样式 */
    .custom-button {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      z-index: 10;
      cursor: pointer;
    }
    
    .button-prev {
      left: 0;
    }
    
    .button-next {
      right: 0;
    }
    </style>
    

    SwiperSlide.vue

    <template v-slot>
      <div class="swiper-slide">
        <slot></slot>
      </div>
    </template>
    
    <script>
    export default {
      name: 'SwiperSlide'
    }
    </script>
    
    <style>
    
    </style>
    

    使用

    <template>
      <div class="wrap">
        <Swiper btnCustom>
          <SwiperSlide>
            <div class="item">Slide 1</div>
          </SwiperSlide>
          <SwiperSlide>
            <div class="item">Slide 2</div>
          </SwiperSlide>
          <SwiperSlide>
            <div class="item">Slide 3</div>
          </SwiperSlide>
          <SwiperSlide>
            <div class="item">Slide 4</div>
          </SwiperSlide>
    
          <template #button-prev>
            <div>上一张</div>
          </template>
          <template #button-next>
            <div>下一张</div>
          </template>
        </Swiper>
      </div>
    </template>
    
    <script>
    import Swiper from "../components/Swiper";
    import SwiperSlide from "../components/SwiperSlide";
    
    export default {
      components: {
        Swiper,
        SwiperSlide
      }
    }
    </script>
    
    <style scoped>
    .wrap {
      /* 父容器,设置 轮播图的宽度 */
      width: 1000px;
      margin: 50px auto;
    }
    
    .item {
      height: 500px;
      background: skyblue;
      font-size: 50px;
      line-height: 500px;
      text-align: center;
    }
    </style>
    

    效果

    在这里插入图片描述

    展开全文
  • vue使用swiper插件

    2021-08-22 13:36:16
    昨天搞这个插件,搞得我很生气! 我只是要个最简单的移动端轮播图,整的我心态本类 能够自动播放,循环就行。。 但是找了一圈,一直...npm install vue-awesome-swiper@3 --save 引入,注册 import { swiper, swip

    昨天搞这个插件,搞得我很生气!
    我只是要个最简单的移动端轮播图,整的我心态本类
    在这里插入图片描述
    能够自动播放,循环就行。。
    但是找了一圈,一直报错
    还有就是,我获取图片是通过接口的,所以用到了v-for循环
    就会出现无法循环播放问题
    只要加上
    v-show="banners.list.length"
    banner.list是存放图片的一个数组
    就行

    我是在组件内导入,不是全局引入

    安装

    npm install vue-awesome-swiper@3 --save
    

    引入,注册

    import { swiper, swiperSlide } from "vue-awesome-swiper";
    import "vue-awesome-swiper/node_modules/swiper/dist/css/swiper.css";
    
    components: {
        swiper,
        swiperSlide,
      },
    

    就是在这里加
    v-show=“banners.list.length”

    html结构

      <swiper
          :options="swiperOption"
          class="swiper"
          ref="mySwiper"
          v-show="banners.list.length"
        >
          <swiper-slide v-for="(banner, index) in banners.list" :key="index">
            <img :src="banner.image" :title="banner.title" />
          </swiper-slide>
    
          <div class="swiper-pagination" slot="pagination"></div>
        </swiper>
    

    data里的数据

    swiperOption: {
            loop: true,//循环
            autoplay: {
              delay: 3000,
              stopOnLastSlide: false,
              disableOnInteraction: false,
            },
            // 显示分页
            pagination: {
              el: ".swiper-pagination",
              clickable: true, //允许分页点击跳转
            },
          },
    
    展开全文
  • 2:创建一个用轮播的组件:例如SwiperImage.vue 3: main.js文件中 引入以下文件 import 'swiper/dist/css/swiper.min.css' import 'swiper/dist/js/swiper.min.js' 3: 组件中模板的代码如下 <template> &...
  • vue 项目使用swiper插件

    2021-06-04 11:35:00
    vue 项目使用swiper插件 1.安装插件 npm install vue-awesome-swiper -save 或者 yarn add vue-awesome-swiper 2.在main.js中全局引入 import 'swiper/dist/css/swiper.css' import VueAwesomeSwiper from 'vue-...
  • 本篇文章主要介绍了vue引入swiper插件使用实例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • Vue中集成使用swiper插件实现轮播图 集成vue-awesome-swiper组件支持vue的写法:终端输入如下命令下载vue-awesome-swiper和swiper
  • 主要介绍了vue中引用swiper轮播插件的方法,在需要使用swiper的组件里引入swiperswiper的初始化放在mounted里。具体实例代码大家跟随脚本之家小编一起看看吧
  • Vue使用Swiper插件

    2020-03-24 18:55:53
    Vue项目中如何优雅的使用Swiper轮播图插件一,Vue项目中下载依赖swiper二,在所需的项目中引入Swiper三,引入Swiper所需的css文件四,初始轮播图五,Swiper使用参数 一,Vue项目中下载依赖swiper cnpm install ...
  •   其实很简单,只需要为每个轮播图设置不同的class类和不同的options名即可。 1.设置不同的class类和options名 ...swiper :options="swiperOptionSwiper1" class="swiper-container swiper-pagination1" ref="mySwipe
  • 效果图 修改箭头的背景,以及....swiper-button-prev, .swiper-button-next{ color: #fff; background: #5e5f5e; } 修改箭头的大小 .swiper-button-prev:after, .swiper-button-next:after { font-size: 14px; }
  • VUE使用Swiper插件

    2018-12-16 11:25:07
    vue项目中,使用swiper插件使用回调函数,在数据中定义swiperOption对象,在对象中调用swiper的回调函数 data () { return { realIndex: 0, swiperOption: { // 获取当前版块的index onSlideC...
  • Swiper简介 Swiper常用于移动端网站的内容触摸...解决vue使用swiper插件,在引入swiper插件后,发现无法正常运行问题 这次我们模拟从后台取下数据,然后数据绑定在swiper标签中。 <abc></abc> <div id=banner>
  • vue引入swiper插件

    万次阅读 热门讨论 2017-04-07 17:12:44
    步骤一:安装vue, $ npm install vue 步骤二:创建vue项目 # 全局安装 vue-cli $ npm install -g vue-cli $ cd my-project $ npm install $ npm run dev 上面这些就是安装好vue
  • vue使用swiper插件的方式,请前往这里查看https://blog.csdn.net/friend_ship/article/details/104919781 由于vue-awesome-swiper插件包的版本问题,会出现左右箭头点击失效的情况 解决方式如下: npm ...
  • 项目中使用vue,刚好有需求要实现轮播图,突出显示当前图片,两边展示其他图片;通过查各种资料,实现了,故在此记录下来 下面我们来看下实现步骤: 第一步:首先在项目index.html中引入swiper的css文件- swiper...
  • vue-awesome-swiper.js?...今天在用vue使用swiper插件时遇到这样的错误 vue-awesome-swiper.js?7212:1 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading ‘_c’) 附上导
  • 主要为大家详细介绍了vue2.0使用swiper组件实现轮播效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • vue 使用swiper时出现的布局错乱问题 https://mp.csdn.net/mdeditor/102522543#

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 4,550
精华内容 1,820
关键字:

vue使用swiper插件

vue 订阅