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的配置信息如下,具体请参考官网: 

     例子:点击该文字

     
  • 相关阅读:
    ajax()方法与后台交互
    实现CSS中的垂直水平居中(附带Flex布局,CSS3+SASS完美版)
    yield语句
    匿名方法和Lambda表达式
    委托、Lambda表达式和事件
    分治法
    分治法求一个N个元素数组的逆序数
    快速找出故障机器
    C++关联容器综合应用:TextQuery小程序
    转:做一个有趣的有意思的人
  • 原文地址:https://www.cnblogs.com/xiaoxiao2014/p/13651891.html
Copyright © 2011-2022 走看看