VueAwesomeSwiper在VUE中的使用以及遇到的一些问题
转载 &更新时间：日 13:42:42 & 作者：littleyu
这篇文章主要介绍了VueAwesomeSwiper在VUE中的使用以及遇到的一些问题，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
Vue-Awesome-Swiper
轮播图插件，可以同时支持Vue.js（1.X ~ 2.X），兼顾PC和移动端，随着vue的广泛使用，其中插件swiper也算是使用的比较频繁的插件，现在分享一下使用方法以及开发中会遇到的一些问题。
我们先下载包，然后去main.js里面配置。
npm install vue-awesome-swiper --save
我们可以用import的方法
import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper'
也可以用require
var Vue = require('vue')
var VueAwesomeSwiper = require('vue-awesome-swiper')
两者都可以达到目的，然后再mian.js里面全局注册
Vue.use(VueAwesomeSwiper)
在模板里使用
import { swiper, swiperSlide } from 'vue-awesome-swiper'
export default {
components: {
swiperSlide
&template&
&swiper :options="swiperOption" ref="mySwiper"&
&!-- slides --&
&swiper-slide v-for="slide in swiperSlides" v-bind:style="{ 'background-image': 'url(' + slide + ')' }" :key="slide.id"&&/swiper-slide&
&!-- Optional controls --&
&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&
&/template&
import { swiper, swiperSlide } from 'vue-awesome-swiper'
export default {
name: 'carrousel',
components: {
swiperSlide
swiperOption: { //以下配置不懂的，可以去swiper官网看api，链接http://www.swiper.com.cn/api/
notNextTick: true, // notNextTick是一个组件自有属性，如果notNextTick设置为true，组件则不会通过NextTick来实例化swiper，也就意味着你可以在第一时间获取到swiper对象，假如你需要刚加载遍使用获取swiper对象来做什么事，那么这个属性一定要是true
autoplay: true,
loop: true,
direction: 'horizontal',
grabCursor: true,
setWrapperSize: true,
autoHeight: true,
pagination: {
el: '.swiper-pagination'
centeredSlides: true,
paginationClickable: true,
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev'
keyboard: true,
mousewheelControl: true,
observeParents: true, // 如果自行设计了插件，那么插件的一些配置相关参数，也应该出现在这个对象中，如下debugger
debugger: true
swiperSlides: ['../../static/img/swiper1.jpg', '../../static/img/swiper2.jpg', '../../static/img/swiper3.jpg', '../../static/img/swiper4.jpg']
&!-- Add "scoped" attribute to limit CSS to this component only --&
html, body, #app {
height: 100%;
width: 100%;
.swiper-container-autoheight, .swiper-container-autoheight .swiper-slide {
height: 100
.swiper-pagination-bullet {
height: 15
.swiper-pagination-fraction, .swiper-pagination-custom, .swiper-container-horizontal & .swiper-pagination-bullets {
bottom: 8%;
这样就可以正常使用了，但是以下是一些开发中遇到的一些问题。
很多人在引入swiper的时候会出现小点swiper-pagination出不来或者一些配置属性没有生效。原因是现在最新的swiper版本已经开始区分组件和普通版本了。
在低版本swiper中，我们可以这么写(我相信大部分童鞋百度，论坛到的使用方法大多是这样子的)
// swiper options example:
export default {
name: 'carrousel',
swiperOption:
notNextTick: true,
// swiper configs 所有的配置同swiper官方api配置
autoplay: 3000,
direction: 'vertical',
grabCursor: true,
setWrapperSize: true,
autoHeight: true,
pagination: '.swiper-pagination',
paginationClickable: true,
prevButton: '.swiper-button-prev',//上一张
nextButton: '.swiper-button-next',//下一张
scrollbar: '.swiper-scrollbar',//滚动条
mousewheelControl: true,
observeParents: true,
debugger: true,
注意！！！！
这其中的autoplay和pagination和prevButton和nextButton等属性，在低版本中是允许这么使用的，并且可以功能正常生效，但是再高版本swiper中这样写不会生效，并且vue不会报错。
接下来我们看官网api，拿分页器pagination举个栗子：
在以前低版本的swiper是没有这样子的区分的！所以现在我们可以看看最新版本的swiper分页器的具体文档：
图中标记的部分很明显已经不同于低版本的swiper的使用方法。
还有一些区别官网的api已经写的很清楚了，感兴趣的小伙伴可以自行在官网api中阅读查看噢！
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具vue.js swiper最简单的例子跑不同
swiper的最简单例子跑不通，所有slide都堆在一起了，这个问题困扰我很久了，查网上发现并没有少写什么啊，求明眼人提示一下，多谢。效果图：代码：
&template&
&div class="lasted-books"&
&div class="content"&
&div class="lasted-list"&
&div class="list-title"&
&p class="title-text"&最新上架&/p&
&swiper :options="swiperOptionIn" class="swiper-position"&
&swiper-slide&Slide 1&/swiper-slide&
&swiper-slide&Slide 2&/swiper-slide&
&swiper-slide&Slide 3&/swiper-slide&
&swiper-slide&Slide 4&/swiper-slide&
&swiper-slide&Slide 5&/swiper-slide&
&swiper-slide&Slide 6&/swiper-slide&
&swiper-slide&Slide 7&/swiper-slide&
&swiper-slide&Slide 8&/swiper-slide&
&swiper-slide&Slide 9&/swiper-slide&
&swiper-slide&Slide 10&/swiper-slide&
&div class="swiper-pagination-white swiper-pagination-position" slot="pagination"&&/div&
&/div&&/div&&/template&&script type="text/ecmascript-6"&
import {swiper, swiperSlide} from 'vue-awesome-swiper'
import { mapGetters } from 'vuex'
export default {
components: {
swiperSlide
swiperOptionIn: {
centeredSlides:true,
pagination: '.swiper-pagination-white',
paginationClickable: true,
slidesPerView:'auto',
grabCursor : true,
computed: {
...mapGetters({
bookList: 'books'
}&/script&&style scoped lang="less" rel="stylesheet/less"&
.lasted-books {
margin-top: 50
.content {
.lasted-list {
background: #
margin-top: 10
box-shadow: 0 0 10px #DDD;
.list-title {
height: 50
text-align:
line-height: 50
.swiper-position {
.swiper-slide {
width:100%;
text-align:
font-size:28
justify-content:
align-items:
background:#F2F2F2;
.swiper-pagination-position {
z-index: 1;
flex-direction:
justify-content:
这边有一个原生js封装的轻量的轮播图组件，性能和 使用起来都挺好的 你可以试试https://github.com/zwhGithub/vue-swiper
你还没有登录，请先登录或注册慕课网帐号
最近install下来的这个vue-awesome-swiper好像没有css了 我跑之前的项目样式还能加上去 重新install样式就加不上了
你还没有登录，请先登录或注册慕课网帐号
61980人关注
25845人关注
58442人关注
Copyright (C) 2018 imooc.com All Rights Reserved | 京ICP备 号-11vue 中swiper的使用教程
转载 &更新时间：日 09:45:40 & 作者：linktoword
本文通过实例代码给大家介绍了vue 中swiper的使用，感兴趣的朋友跟随脚本之家小编一起学习吧
在vue cli下的使用
install vue-awesome-swiper --save
在main.js中
VueAwesomeSwiper from 'vue-awesome-swiper'
'swiper/dist/css/swiper.css'
Vue.use(VueAwesomeSwiper)
在component.vue中
&template&
&div id="container"&
&swiper :options="swiperOption" ref="mySwiper"&
&swiper-slide class="swiper-slide games"&
&img src="/src/assets/LB/LB_07.jpg" alt=""&
&/swiper-slide&
&swiper-slide class="swiper-slide games"&
&img src="/src/assets/LB/LB_06.jpg" alt=""&
&/swiper-slide&
&swiper-slide class="swiper-slide games"&
&img src="/src/assets/LB/LB_05.jpg" alt=""&
&/swiper-slide&
&swiper-slide class="swiper-slide games"&
&img src="/src/assets/LB/LB_04.jpg" alt=""&
&/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&
&/template&
import { swiper, swiperSlide } from 'vue-awesome-swiper'
export default {
name: 'carrousel',
swiperOption: {
autoplay : {
disableOnInteraction: false, //用户操作后是否禁止自动循环
delay: 3000 //自自动循环时间
}, //可选选项，自动滑动
speed: 2000, //切换速度，即slider自动滑动开始到结束的时间（单位ms）
loop:true, //循环切换
grabCursor: true, //设置为true时，鼠标覆盖Swiper时指针会变成手掌形状，拖动时指针会变成抓手形状
// setWrapperSize: true, //Swiper使用flexbox布局(display: flex)，开启这个设定会在Wrapper上添加等于slides相加的宽或高，在对flexbox布局的支持不是很好的浏览器中可能需要用到。
autoHeight: true,
//自动高度。设置为true时，wrapper和container会随着当前slide的高度而发生变化。
scrollbar: '.swiper-scrollbar',
mousewheelControl: true, //设置为true时，能使用鼠标滚轮控制slide滑动
observeParents: true, //当改变swiper的样式（例如隐藏/显示）或者修改swiper的子元素时，自动初始化swiper
pagination: {
el: '.swiper-pagination',
// type : 'progressbar', //分页器形状
clickable :true, //点击分页器的指示点分页器会控制Swiper切换
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
computed: {
swiper() {
return this.$refs.mySwiper.swiper
&style scoped&
width: 100%;
以上所述是小编给大家介绍的vue 中swiper的使用教程，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具新人专享好礼凡未购买过小册的用户，均可领取三张 5 折新人专享券，购买小册时自动使用专享券，最高可节省 45 元。小册新人 5 折券最高可省 15 元小册新人 5 折券最高可省 15 元小册新人 5 折券最高可省 15 元注：专享券的使用期限在领券的七天内。一键领取购买小册时自动使用专享券前往小册首页本活动仅适用于小册新用户知道了vue引入新版 swiper,vue-awesome-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: {
swiperSlide
template：
&swiper :options="swiperOption"&
&swiper-slide&I'm Slide 1&/swiper-slide&
&swiper-slide&I'm Slide 2&/swiper-slide&
&swiper-slide&I'm Slide 3&/swiper-slide&
&div class="swiper-pagination"
slot="pagination"&&/div&
export default {
swiperOption: {
// 所有的参数同 swiper 官方 api 参数一样
重点在于 swiperOption 里面的变化，区别看下图：
原来 pagination 和 autoplay 要这样配置！我原来就是在这两处错了，导致 pagination 不显示，图片不轮播。
出错前：纠正后：
vue-awesome-swiper官网其实早放出说明来了，但自己一看全是英文，就没想看下去。后来发其实很容易看懂得，吸取教训自己多去看看文档，不要找 demo 去抄。
还是少依靠插件，有些插件随时更新，等有能力，自己造！
弄到晚上12点，才弄明白原来 Swiper 版本区分了组件和普通版本，不能看照原来的经验写了。发现网上关于最新 vue-awesome-swiper就两三篇，而且没说清楚。于是写下这篇，希望对大家有帮助。
相关热门文章分享Swiper.js-最好的移动触摸滑动插件：Swiper-前端开发博客 最新文章
推荐文章 12029Views 1958Views 1277Views 1894Views 4829Views热门文章
35,841Views
27,383Views
25,089Views
15,011Views
12,630Views
11,590Views查看更多相关吗？百度搜索：移动端触摸滑动js插件swiper.js轮播图插件angularjs swiper插件swiper.js 滑动时闪白swiper.js滑动失效swiper.js 禁止滑动");