Vue-Awesome-Swiper(Vue使用Swiper)

Vue-Awesome-SwiperSwiper4 component for Vue, support pc and mobile, SPA and SSR.If you need to roll back to Swiper3, use version v2.6.7.基于 Swiper4、适用于 Vue 的轮播组件，支持服务端渲染和单页应用。如果需要回退到 Swiper3，请使用 v2.6.7

Super_LD

5143人浏览 · 2018-06-03 21:33:05

Super_LD · 2018-06-03 21:33:05 发布

Vue中重点关注绿色字体部分

Vue-Awesome-Swiper

Swiper4 component for Vue, support pc and mobile, SPA and SSR.

If you need to roll back to Swiper3, use version v2.6.7.

基于 Swiper4、适用于 Vue 的轮播组件，支持服务端渲染和单页应用。

如果需要回退到 Swiper3，请使用 v2.6.7 版本。

Example

Demo Page

CDN Example

mobile fullpage example code

nuxt.js/ssr example code

Install

CDN

Vue.use(window.VueAwesomeSwiper)

</script>

NPM

npm install vue-awesome-swiper --save

Mount

mount with global

import Vue from 'vue'

import VueAwesomeSwiper from 'vue-awesome-swiper'

// require styles

import 'swiper/dist/css/swiper.css'

Vue.use(VueAwesomeSwiper, /* { default global options } */)

mount with component

// require styles

import 'swiper/dist/css/swiper.css'

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

export default {

components: {

swiper,

swiperSlide

}

mount with ssr

// If used in nuxt.js/ssr, you should keep it only in browser build environment

if (process.browser) {

const VueAwesomeSwiper = require('vue-awesome-swiper/dist/ssr')

Vue.use(VueAwesomeSwiper)

}

custom swiper plugin

import Swiper from 'swiper'

Swiper.use({

params: {

pluginSwitch: false,

on: {

init() {

if (!this.params.pluginSwitch) return

console.log('init')

// swiper callback...

}

})

Difference（使用方法的异同）

SSR and the only difference in the use of the SPA:

SPA worked by the component, find swiper instance by ref attribute.
SSR worked by the directive, find swiper instance by directive arg.
Other configurations, events are the same.

SPA

<swiper-slide>I'm Slide 1</swiper-slide>

<swiper-slide>I'm Slide 2</swiper-slide>

<swiper-slide>I'm Slide 3</swiper-slide>

<swiper-slide>I'm Slide 4</swiper-slide>

<swiper-slide>I'm Slide 5</swiper-slide>

<swiper-slide>I'm Slide 6</swiper-slide>

<swiper-slide>I'm Slide 7</swiper-slide>

</swiper>

</template>

export default {

data() {

return {

swiperOption: {

// some swiper options/callbacks

// 所有的参数同 swiper 官方 api 参数

// ...

}

computed: {

swiper() {

return this.$refs.mySwiper.swiper

}

mounted() {

// current swiper instance

// 然后你就可以使用当前上下文内的swiper对象去做你想做的事了

console.log('this is current swiper instance object', this.swiper)

this.swiper.slideTo(3, 1000, false)

}

</script>

Async data example

<swiper-slide v-for="slide in swiperSlides">I'm Slide {{ slide }}</swiper-slide>

</swiper>

</template>

export default {

data() {

return {

swiperOption: {

pagination: {

el: '.swiper-pagination'

}

swiperSlides: [1, 2, 3, 4, 5]

}

mounted() {

setInterval(() => {

console.log('simulate async data')

if (this.swiperSlides.length < 10) {

this.swiperSlides.push(this.swiperSlides.length + 1)

}

}, 3000)

}

</script>

SSR

</template>

export default {

data () {

return {

banners: [ '/1.jpg', '/2.jpg', '/3.jpg' ],

swiperOption: {

pagination: {

el: '.swiper-pagination'

// some swiper options...

loop: true,
// 如果需要分页器
  pagination: {
el: '.swiper-pagination',
},

// 如果需要前进后退按钮
  navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
  },

// 如果需要滚动条
scrollbar: {
el: '.swiper-scrollbar',
}

}

mounted() {

setTimeout(() => {

this.banners.push('/4.jpg')

console.log('banners update')

}, 3000)

console.log(

'This is current swiper instance object', this.mySwiper,

'It will slideTo banners 3')

this.mySwiper.slideTo(3, 1000, false)

}

</script>

API

Swiper's API and configuration can be used.（Swiper官网中的API及配置均可使用）

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^