vue引入新版 swiper,vue-awesome-swiper填坑

Miyang 发布于2019-08-22 14:01 / 3128人阅读

摘要：出错前纠正后总结官网其实早放出说明来了，但自己一看全是英文，就没想看下去。发现网上关于最新就两三篇，而且没说清楚。于是写下这篇，希望对大家有帮助。

关于新版 swiper,vue-awesome-swiper 问题

为什么我的swiper,vue-awesome-swiper组件pagination小圆点不显示问题?

为什么我的swiper不会自动播放？

为什么我的swiper没有css？

使用 引入（前面的步骤和往常一样）

npm install vue-awesome-swiper --save

在 main,js 里引入（全局）:
import VueAwesomeSwiper from "vue-awesome-swiper"
Vue.use(VueAwesomeSwiper)
import "swiper/dist/css/swiper.css"(css 不显示的问题可能就在这)

组件里引入：

import "swiper/dist/css/swiper.css"    //在全局没引入，这里记得要！
import { swiper, swiperSlide } from "vue-awesome-swiper"
 
export default {
  components: {
    swiper,
    swiperSlide
  }
}

配置

template：


    I"m Slide 1
    I"m Slide 2
    I"m Slide 3

script：

export default {
    data() {
      return {
        swiperOption: {
          // 所有的参数同 swiper 官方 api 参数一样
          // 
        }
      }
    },
    ...
  }

重点在于 swiperOption 里面的变化，区别看下图：

原来 pagination 和 autoplay 要这样配置！
我原来就是在这两处错了，导致 pagination 不显示，图片不轮播。

出错前：

纠正后：

总结

vue-awesome-swiper官网其实早放出说明来了，但自己一看全是英文，就没想看下去。后来发其实很容易看懂得，吸取教训自己多去看看文档，不要找 demo 去抄。

还是少依靠插件，有些插件随时更新，等有能力，自己造！

弄到晚上12点，才弄明白原来 Swiper 版本区分了组件和普通版本，不能看照原来的经验写了。
发现网上关于最新 vue-awesome-swiper就两三篇，而且没说清楚。于是写下这篇，希望对大家有帮助。

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/92767.html

vue-awesome-swiper滑块插件使用基础

摘要：前言目前在使用建立的版项目中，直接引入官方的文件会导致报错，所以需要用到版本的。安装版配置使用可参考插入滑块组件与官方相同，额外的控制器依然可以放到整个滑块之外。前言目前(2017-07-11)在使用vue-cli建立的webpack版项目中，直接引入官方的swiper文件会导致报错，所以需要用到vue版本的swiper。 webpack-simple版可直接引入官方swiper文...

microelec 2019-08-20 17:54 评论0 收藏0
vue轮播图插件之vue-awesome-swiper

摘要：移动端轮播图插件，在使用图形界面插件中的组件无法实现触摸滑动后，转而使用插件安装我这里安装的是下面的这个版本使用全局导入样式的话，我这里有用到分页器，就在全局中引入了样式组件引入在中使用常见的小圆点移动端轮播图插件，在使用iview图形界面插件中的carousel组件无法实现触摸滑动后，转而使用vue-awesome-swiper插件 1.npm安装 npm i vue-awesom...

binta 2019-08-23 12:00 评论0 收藏0
在Vue/webpack引入第三方插件jQuery/swiper：简单易行

摘要：写在前面日前，在学习使用开发新的项目。然而目前用实现的框架里面，尚未出现具有像一样统治力的框架。最后这里只举了和的例子，同理其他插件也是可用同样的方法引入。虽以上皆经过实战检验，但若有错误欢迎指正。写在前面日前，在学习使用Vue2.0开发新的项目。然而目前用Vue实现的UI框架里面，尚未出现具有像bootstrap一样统治力的框架。一番纠结后，老夫抄起家伙就是一梭... 那么问题来...

April 2019-08-20 17:43 评论0 收藏0
基于 Vue 实现的移动端图片轮播组件.

摘要：基于的移动端的图片轮播组件之前一直在用功能很齐全但是唯一的问题就是体积比较大我只是想要一个简单的图片轮播但是却要引入多大小的文件这样是不对的特点支持自动播放无限轮播效果支持用户手动滑动压缩后大概使用在入口文件中引入暂时不支持单组 wc-swiper 基于 Vue 的移动端的图片轮播组件. why 之前一直在用 vue-awesome-swiper, 功能很齐全, 但是唯一的问题就是体积...

hsluoyz 2019-08-20 18:52 评论0 收藏0
vue 前端项目技术选型、开发工具、周边生态

摘要：有目录结构书写方式组件集成项目构建等的约束，整个应用中是没有文件的，所有的响应都是动态渲染的，包括里面的元信息路径等。更多参考细说后端模板渲染客户端渲染中间层服务器端渲染开发工具开发时主要会用到的工具。 vue 前端项目技术选型、开发工具、周边生态声明：这不是一篇介绍 Vue 基础知识的文章，需要熟悉 Vue 相关知识主架构：vue, vue-router, vuex UI 框...

Awbeci 2019-08-30 15:54 评论0 收藏0