vue轮播图插件vue-awesome-swiper

Vue-Awesome-Swiper

轮播图插件,可以同时支持Vue.js(1.X ~ 2.X),兼顾PC和移动端,SPA和SSR。

例子

安装设置

安装Install vue-awesome-swiper

vue挂载

<div class="jb51code">
<pre class="brush:js;">
// import
import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper'

// or require
var Vue = require('vue')
var VueAwesomeSwiper = require('vue-awesome-swiper')

// mount with global
Vue.use(VueAwesomeSwiper)

// If used in Nuxt.js/SSR,you should keep it only in browser build environment
// The Process. BROWSER_BUILD itself is just a feature,it is only valid in Nuxt.js,you need to modify it according to your own procedures,such as: in vue official ssr scaffolding it should beprocess.browser
if (process.BROWSER_BUILD) {
const VueAwesomeSwiper = require('vue-awesome-swiper/ssr')
Vue.use(VueAwesomeSwiper)
}

// mount with component(can't work in Nuxt.js/SSR)
import { swiper,swiperSlide } from 'vue-awesome-swiper'

export default {
components: {
swiper,swiperSlide
}
}

SPA与SSR中使用方法的区别

SPA通过组件作用,需要借助ref属性查找swiper实例 SSR通过命令作用,需要借助命令参数查找swiper实例 其他配置和事件一致

SSR中的应用

SPA中的应用

<div class="jb51code">
<pre class="brush:js;">

异步数据例子

<div class="jb51code">
<pre class="brush:xhtml;">

移动端例子的代码

SSR例子的代码

API

参考官网:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。

相关文章

问题现象 elmentui的el-tree数据加载问题,导致第一次加载选中当前节点和高亮当前节点没有生效。 解决方...
因为刚打开文件,vscode默认是预览状态,如果编辑过之后,就不会有这个问题。 可以通过双击将预览状态接...
前言 上篇文章我们介绍了国产SM4加密算法的后端java实现方案。没有看过的小伙伴可以看一下这篇文章。 h...
在项目中引入动态路由时报错 写法: 报错: Module build failed (from ./node_modules/_eslint-loader@2...
问题产生 在使用babel编译es6时,遇到报错Uncaught ReferenceError: regeneratorRuntime is not define...
父组件的编写 &amp;lt;a:orgCode=orgCode &amp;gt;&amp;lt;/a&amp;gt; 在data里面增加...