zoukankan      html  css  js  c++  java
  • vue中使用swiper 问题

    1 不能自动轮播,分页点点不显示

      解决办法:

    install 加版本号。

    在vue中使用swiper插件的方式,请前往这里查看https://blog.csdn.net/friend_ship/article/details/104919781

    由于vue-awesome-swiper插件包的版本问题,会出现左右箭头点击失效的情况

    解决方式如下:

    npm uninstall vue-awesome-swiper --save

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

    安装完3.1.3的版本后,重新启动查看就解决了

    2 报错  Error in render: "TypeError: Cannot set property 'params' of undefined"  ---跟版本号有关系,4.0 版本首字母大写,3.0版本,首字母小写

    答案链接:https://github.com/surmon-china/vue-awesome-swiper/issues/499

     If you use vue-awesome-swiper@3.x , the correct code is:

    import { swiper, swiperSlide } from 'vue-awesome-swiper

    else if you use vue-awesome-swiper@4.x, the correct code is:

    import { Swiper, SwiperSlide } from 'vue-awesome-swiper
    vue 中swiper的用法 如下链接:

    https://blog.csdn.net/friend_ship/article/details/104919781

    第一种:全局引入

    在main.js中

     import VueAwesomeSwiper from 'vue-awesome-swiper';
     import "swiper/dist/css/swiper.css";
     
     Vue.use(VueAwesomeSwiper)

    第二种:局部引入

    在所用模块的js文件中

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

    在.vue文件中,左右箭头放在轮播图的外面,代码如下:

    <swiper class="swiper" :options="swiperOption" >
          <swiper-slide class="swiper-slide" v-for="item in 4" :key="item">
              <div class="swiper-content">{{item}}</div>
          </swiper-slide>
          <div class="swiper-pagination" slot="pagination"></div>
    </swiper>
     
     <div class="swiper-button-prev" slot="button-prev"></div>
     <div class="swiper-button-next" slot="button-next"></div>

    在.vue文件中,左右箭头放在轮播图的里面,代码如下:

    <swiper class="swiper" :options="swiperOption" >
          <swiper-slide class="swiper-slide" v-for="item in 4" :key="item">
              <div class="swiper-content">{{item}}</div>
          </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>

     

    上面swiperOption的配置信息如下,具体请参考官网: 

     例子:点击该文字

     
  • 相关阅读:
    EMV内核使用中的常见问题
    SM2国密证书合法性验证
    WP8.1中C++的winodws运行时组件位移操作的差异
    [源码]Literacy 快速反射读写对象属性,字段
    Vue 单文件元件 — vTabs
    vue-router路径计算问题
    前端跨域新方案尝试
    Vue 单文件原件 — vCheckBox
    JavaScript 功能类 Url.js
    Vue 学习笔记 — 组件初始化
  • 原文地址:https://www.cnblogs.com/xiaoxiao2014/p/13651891.html
Copyright © 2011-2022 走看看