解决vue中使用swiper 插件出错的问题

由于我自己在写一个demo时候用到了该插件，出现了一些问题，所以就简单查了一下该插件的用法以及一些常见的错误

1.出现Get .../maps/swiper.min.js.map 500(Internal Server Error)

使用min版本时缺少Source Map文件

1. 禁止Source Map提示，删除swiper.min.js文件的最后一行//# sourceMappingURL=swiper.min.js.map即可

2. 如需要使用Source Map，完整包里面有该文件swiper.min.js.map，请放在相应的位置。关于Source Map

2 .出现不能自动轮播，分页点点不显示

解决办法：

install 加版本号。

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

解决方式如下：

npm uninstallvue-awesome-swiper --save

npm installvue-awesome-swiper@3.1.3 --save

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

3.出现Error in render: "TypeError: Cannot set property 'params' of undefined" ---跟版本号有关系，4.0 版本首字母大写，3.0版本，首字母小写。

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

如果使用的是3.x版本vue-awesome-swiper@3.x,导入代码如下:

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

如果使用的是4.x版本vue-awesome-swiper@4.x,导入代码如下:

import { Swiper, SwiperSlide } from 'vue-awesome-swiper

4.出现 Uncaught ReferenceError: Swiper is not defined at...

可能是没有加载JS文件或位置错误

解决方式如下：

下载文件包并在页面中加载Swiper的JS和CSS文件，或使用Swiper的CDN服务加载文件，加载后再初始化Swiper

Vue中使用Swiper的用法如下：

第一种：全局引入

在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的配置信息如下，具体请参考官网：https://www.swiper.com.cn/api/index.html

到此这篇关于vue中使用swiper 插件出错问题的文章就介绍到这了,更多相关vue使用swiper 插件内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • vue轮播图插件vue-awesome-swiper

    Vue-Awesome-Swiper 轮播图插件,可以同时支持Vue.js(1.X ~ 2.X),兼顾PC和移动端,SPA和SSR. 例子 例子 安装设置 安装Install vue-awesome-swiper npm install vue-awesome-swiper --save vue挂载 // import import Vue from 'vue' import VueAwesomeSwiper from 'vue-awesome-swiper' // or require var

  • vue轮播图插件vue-awesome-swiper的使用代码实例

    最近写vue2.0项目中用到了轮播图的一个插件,也就是vue-awesome-swiper,个人感觉还是比较强大的,swiper官网中的API及配置均可使用(支持3.0),以下说下使用该插件的一些步骤: 第一步安装 npm install vue-awesome-swiper --save 第二部在main.js中引入 import Vue from 'vue' import VueAwesomeSwiper from 'vue-awesome-swiper' Vue.use(VueAwesom

  • vue引入swiper插件的使用实例

    本文介绍了vue引入swiper插件,分享给大家,希望对大家有帮助 步骤一:安装vue, $ npm install vue 步骤二:创建vue项目 # 全局安装 vue-cli $ npm install -g vue-cli $ cd my-project $ npm install $ npm run dev 上面这些就是安装好vue项目,最主要的就是下面的步骤 步骤三:下载好swiper相关的js和css,js放在static目录下,css放在assets目录下. 步骤四:  安装run

  • vue项目中导入swiper插件的方法

    vue项目中导入swiper插件的方法

    版本选择 swiper是个常用的插件,现在已经迭代到了第四代:swiper4. 常用的版本是swiper3和swiper4,我选择的是swiper3. 安装 安装swiper3的最新版本3.4.2: npm i swiper@3.4.2 -S 这里一个小知识,查看node包的所有版本号的方法: npm view 包名 versions 组件编写 swiper官方的使用方法分为4个流程: 加载插件 HTML内容 给Swiper定义一个大小 初始化Swiper 我也按照这个流程编写组件: 加载插件

  • vue-awesome-swiper滑块插件使用方法详解

    vue-awesome-swiper滑块插件使用方法详解

    本文实例为大家分享了Android九宫格图片展示的具体代码,供大家参考,具体内容如下 github地址: https://github.com/surmon-china/vue-awesome-swiper.git 1.进入项目目录,安装swiper npm install vue-awesome-swiper --save 2.引入资源 //vue滑块 import VueAwesomeSwiper from 'vue-awesome-swiper' Vue.use(VueAwesomeSwi

  • vue中引用swiper轮播插件的教程详解

    有时候我们需要在vue中使用轮播组件,如果是在vue组件中引入第三方组件的话,最好通过npm安装,从而进行统一安装包管理. 申明:本文所使用的是vue.2x版本. 通过npm安装插件:  npm install swiper --save-dev 在需要使用swiper的组件里引入swiper,swiper的初始化放在mounted里 Slider.vue源码: <template> <div class="swiper-container"> <div

  • 解决vue中使用swiper插件问题及swiper在vue中的用法

    Swiper简介 Swiper常用于移动端网站的内容触摸滑动. Swiper是纯javascript打造的滑动特效插件,面向手机.平板电脑等移动终端. Swiper能实现触屏焦点图.触屏Tab切换.触屏多图切换等常用效果. Swiper开源.免费.稳定.使用简单.功能强大,是架构移动终端网站的重要选择! 解决vue中使用swiper插件,在引入swiper插件后,发现无法正常运行问题 这次我们模拟从后台取下数据,然后数据绑定在swiper标签中. <template> <div clas

  • vue引入新版 vue-awesome-swiper插件填坑问题

    vue引入新版 vue-awesome-swiper插件填坑问题

    本文介绍了关于新版 vue-awesome-swiper,分享给大家,具体如下: 问题 为什么我的vue-awesome-swiper组件pagination小圆点不显示问题? 为什么我的vue-awesome-swiper不会自动播放? 为什么我的vue-awesome-swiper没有? 使用 引入(前面的步骤和往常一样) npm install vue-awesome-swiper --save 在 main,js 里引入(全局): import VueAwesomeSwiper from

  • 解决vue中使用swiper 插件出错的问题

    由于我自己在写一个demo时候用到了该插件,出现了一些问题,所以就简单查了一下该插件的用法以及一些常见的错误 1.出现Get .../maps/swiper.min.js.map 500(Internal Server Error) 使用min版本时缺少Source Map文件 1. 禁止Source Map提示,删除swiper.min.js文件的最后一行//# sourceMappingURL=swiper.min.js.map即可 2. 如需要使用Source Map,完整包里面有该文件s

  • 解决Vue中引入swiper,在数据渲染的时候,发生不滑动的问题

    前几天在工作的过程中,在数据渲染的时候,发生了swiper那一部分的轮播图不在滚动,手动滑动也没有效果.一直感觉数据开始渲染,是不是数据渲染的时候,并没有生成swiper的节点呢.后来第一感觉就是把控制swiper轮播的函数放在初始化事件中去, 放在初始化事件中去: 结果并没有达到自己的理想状况,后来放在数据获取之后哪里在进行轮播事件的发生, swiper终于可以滑动了.其实这也不能算是一个什么大的问题点,只是单纯的想记录一下.以后在遇到相似的问题,更多的应该是从数据实现的先后来出发.这次就当做

  • 解决Angular.js中使用Swiper插件不能滑动的问题

    我们都知道swiper是交互体验十分好的轮播插件 但是通过angular(ng-repeat)循环出来的swiper不能轮播的解决方案 通常我们都是通过以下方法来执行: html <div class="swiper-container" ng-controller="swiperController"> <div class="swiper-wrapper"> <div class="swiper-sli

  • vue如何使用swiper插件修改左右箭头的默认样式

    目录 使用swiper插件修改左右箭头的默认样式 vue中修改swiper样式问题 原因 解决方法 总结 使用swiper插件修改左右箭头的默认样式 效果图 修改箭头的背景,以及颜色 .swiper-button-prev, .swiper-button-next{ color: #fff; background: #5e5f5e; } 修改箭头的大小 .swiper-button-prev:after, .swiper-button-next:after { font-size: 14px;

  • vue中七牛插件使用的实例代码

    本文介绍了vue中七牛插件使用,我也正在学习,分享给大家,顺便留个笔记,废话不说了,如下: <template> <div id="cxUpload" class="cx-upload"> <button id="pickfiles" class="uploadBtn">上传</button> </div> </template> <script&g

  • 解决Vue打包之后文件路径出错的问题

    这里以vue-cli创建的项目为例 1.文件路径不对 找到config文件夹下的index.js文件修改一下位置 看清楚是 build(上边还有个dev 是开发环境下的配置,不需要改动)下的 assetsPublicPath :将'/'改为'./' 2.背景图片路径不对 在css中写的background-img的路径出错 需要找到build文件夹下的utils.js,修改一下位置 加入红框内字段即可. 以上这篇解决Vue打包之后文件路径出错的问题就是小编分享给大家的全部内容了,希望能给大家一个

  • 解决vue中修改export default中脚本报一大堆错的问题

    在写vue代码的时候遇到了一修改.vue文件中export default下脚本的时候总是报一堆莫名其妙的错误的问题: 出错原因: 在构建项目的时候Use ESLint to lint your code? (Y/n)选择了y,规范了js代码 解决途径: 在webpack.base.conf.js里面删掉/注释掉: { test: /\.(js|vue)$/, loader: 'eslint-loader', enforce: 'pre', include: [resolve('src'), r

  • 解决vue中使用less/sass及使用中遇到无效的问题

    一:使用方法 在vue官方脚手架中,即vue-lci搭建的项目中,可以轻易的使用less/sass. 先使用npm下载依赖,命令行为'npm install less less-loader –save',再在webpack.base.conf.js中添加rules对象: { test: /\.less$/, loader: "style-loader!css-loader!less-loader" }` 然后在style标签中添加lang="less"即可,或者直

随机推荐