好资源导航 » 文章资讯 » vue轮播图插件vue-awesome-swiper

vue轮播图插件vue-awesome-swiper

2023-09-20 11:18:05 132

Vue-Awesome-Swiper

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

例子

安装设置

安装Installvue-awesome-swiper

npminstallvue-awesome-swiper--save

vue挂载

//import
importVuefrom'vue'
importVueAwesomeSwiperfrom'vue-awesome-swiper'


//orrequire
varVue=require('vue')
varVueAwesomeSwiper=require('vue-awesome-swiper')


//mountwithglobal
Vue.use(VueAwesomeSwiper)


//IfusedinNuxt.js/SSR,youshouldkeepitonlyinbrowserbuildenvironment
//The`Process.BROWSER_BUILD`itselfisjustafeature,itisonlyvalidinNuxt.js,youneedtomodifyitaccordingtoyourownprocedures,suchas:invueofficialssrscaffoldingitshouldbe`process.browser`
if(process.BROWSER_BUILD){
constVueAwesomeSwiper=require('vue-awesome-swiper/ssr')
Vue.use(VueAwesomeSwiper)
}


//mountwithcomponent(can'tworkinNuxt.js/SSR)
import{swiper,swiperSlide}from'vue-awesome-swiper'

exportdefault{
components:{
swiper,
swiperSlide
}
}

SPA与SSR中使用方法的区别

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

SSR中的应用

SPA中的应用

异步数据例子

移动端例子的代码

例子

SSR例子的代码

例子

API

参考官网：http://www.swiper.com.cn/api/index.html

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

返回顶部
514930285
czq8825@qq.com

vue轮播图插件vue-awesome-swiper

热门推荐

随机推荐