快速入门在Vue中使用滑动插件Swiper
前言
swiper
开源、免费、强大的滑动插件。
swiper中文网
https://www.swiper.com.cn/
Swiper4中文API
https://www.swiper.com.cn/api/index.html
Vue-Awesome-Swipwe
基于Swiper、适用于Vue的轮播组件,支持服务端和单页引用。
插件npm
https://www.npmjs.com/package/vue-awesome-swiper
在线demo
https://surmon-china.github.io/vue-awesome-swiper/
效果
场景
home.vue是仿音乐播放器的主页面,在home界面引入了Swiper_Banner.vue这个组件用来实现轮播图。
在Swiper_Banner.vue,滚动的图片已经写死,放在assets下的img目录下。
项目目录结构
实现
1.安装vue-awesome-swiper插件
项目根目录下打开命令行输入:
npm install --save vue-awesome-swiper
或者
cnpm install --save vue-awesome-swiper
2.home.vue中引入Swiper_Banner.vue组件
打开home.vue
引入组件
import SwiperBanner from "../components/Swiper_Banner"
其中../表示上级目录。
注入组件
export default {name:"home",components:{SwiperBanner}
}
引用组件
<template lang="html"><div class=""><TodayRecommend/><NewsMusic /><SwiperBanner/></div>
</template>
home.vue 完整代码
<template lang="html"><div class=""><TodayRecommend/><NewsMusic /><SwiperBanner/></div>
</template><script>
import TodayRecommend from "../components/Today_Recommend"
import NewsMusic from "../components/News_Music"
import SwiperBanner from "../components/Swiper_Banner"
export default {name:"home",components:{TodayRecommend,NewsMusic,SwiperBanner}
}
</script><style lang="css">
</style>
3.在Swiper_Banner.vue中配置轮播图
打开轮播图组件Swiper_Banner.vue
首先引入swiper以及swiper的样式文件
(局部注册:参照:https://www.npmjs.com/package/vue-awesome-swiper)
import 'swiper/dist/css/swiper.css'
import { swiper, swiperSlide } from 'vue-awesome-swiper'
进行组件引入声明
components: {swiper,swiperSlide}
页面添加swiper组件元素
参照:
https://www.npmjs.com/package/vue-awesome-swiper
下的SPA:
<!-- The ref attr used to find the swiper instance -->
<template><swiper :options="swiperOption" ref="mySwiper" @someSwiperEvent="callback"><!-- slides --><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><!-- 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><div class="swiper-scrollbar" slot="scrollbar"></div></swiper>
</template><script>export default {name: 'carrousel',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>
这里只要分页器,别的属性不配置,
配置参数参照官方API参数:
https://www.swiper.com.cn/api/pagination/362.html
此处为:
<template lang="html"><div class="banner"><swiper :options="swiperOption"><swiper-slide><img src="../assets/img/b1.jpg" alt=""></swiper-slide><swiper-slide><img src="../assets/img/b2.jpg" alt=""></swiper-slide><swiper-slide><img src="../assets/img/b3.jpg" alt=""></swiper-slide><div class="swiper-pagination" slot="pagination"></div></swiper></div>
</template>
配置swiper组件属性
export default {data(){return{swiperOption:{pagination: {el: '.swiper-pagination',//swiper的分页器},autoplay:{delay:1000,//间隔一秒滚动一次}//自动滚动}}},
Swiper_Banner.vue完整代码
<template lang="html"><div class="banner"><swiper :options="swiperOption"><swiper-slide><img src="../assets/img/b1.jpg" alt=""></swiper-slide><swiper-slide><img src="../assets/img/b2.jpg" alt=""></swiper-slide><swiper-slide><img src="../assets/img/b3.jpg" alt=""></swiper-slide><div class="swiper-pagination" slot="pagination"></div></swiper></div>
</template><script>import 'swiper/dist/css/swiper.css'
import { swiper, swiperSlide } from 'vue-awesome-swiper'export default {data(){return{swiperOption:{pagination: {el: '.swiper-pagination',//swiper的分页器},autoplay:{delay:1000,//间隔一秒滚动一次}//自动滚动}}},components: {swiper,swiperSlide}
}
</script><style scoped>.banner{padding: 10px;
}</style>
快速入门在Vue中使用滑动插件Swiper相关推荐
- vue html css,HTML+CSS入门 在vue中使用animate.css
本篇教程介绍了HTML+CSS入门 在vue中使用animate.css,希望阅读本篇文章以后大家有所收获,帮助大家HTML+CSS入门. < animate.css是一款前端动画库,相似的有v ...
- Vue中使用can-autoplay插件实现浏览器不支持自动播放音频时提示点击
场景 Vue中使用speak-tts插件实现点击按钮后进行语音播报(TTS/文字转语音): Vue中使用speak-tts插件实现点击按钮后进行语音播报(TTS/文字转语音)_BADAO_LIUMAN ...
- java fields是_一个快速生成R2.java中fields的插件
一个快速生成R2.java中fields的插件 项目地址:github.com/JeasonWong/- 介绍 在子 module 中使用 ButterKnife 时,如果想使用 ButterKnif ...
- 四篇文章带你快速入门Jetpck(中)之ViewModel,DataBinding
文章目录 四篇文章带你快速入门Jetpck(中)之ViewModel,DataBinding Jetpack 官方推荐架构 ViewModel 添加依赖 创建ViewModel 初始化ViewMode ...
- unformat方法java_快速入门介绍Java中强大的String.format()
快速入门介绍Java中强大的String.format() 发布于 2020-12-12| 复制链接 摘记: 前言从 Java 5.0 开始,String 类新增了一个强大的字符串格式化方法 form ...
- vue-tour快速入门:VUE项目中如何使用vue-tour新手引导指引插件?怎样使用?包含具体实例
官网: Vue Tour | A lightweight and customizable tour plugin for use with Vue.jshttps://pulsardev.githu ...
- 01Vue.js快速入门(一)Vue概念及Helloworld
1.1. Vue简介 Vue是一个前端的双向绑定类的框架,发音[读音 /vjuː/, 类似于 view].新的Vue版本参考了React的部分设计,当然也有自己独特的地方,比如Vue的单文件组件开发方 ...
- 面试官:Vue中组件和插件有什么区别?
一.组件是什么 回顾一下对组件的定义: 组件就是把图形.非图形的各种逻辑均抽象为一个统一的概念(组件)来实现开发的模式,在Vue中每一个.vue文件都可以视为一个组件 组件的优势 降低整个系统的耦合度 ...
- 任务队列:celery快速入门及django中celery的用法
文章目录 一.celey的简介 1.1 celery的工作机制 1.2 安装celery(5.2版本) 二.celery快速入门 2.1 选择broker 2.2 celery的简单使用 2.2.1 ...
最新文章
- 解压文件出错解决方法(invalid compressed data--format violated)
- JavaScript规范和工具 JSlint
- 云原生系列「三」容器网络
- kotlin android获取按钮,Kotlin 实现按钮点击跳转监听事件方式
- 21 年总结:文章的盘点和写作背景
- Bootstrap 禁用某个菜单项
- 赋能金融全链路,360金融的融合中台究竟有何不同?
- cad批量打印_CAD插件——批量打印软件安装包+安装教程
- 固态硬盘是什么接口_硬盘接口/SSD固态硬盘
- Ubuntu双系统、ROS、软件安装教程
- 一步一步建立自己的神经网络
- Age Estimation
- 【Coursera】深度神经网络的改进:超参数调整、正则化和优化(更新中2023/04/12)
- 基于JAVA的SM4文件加密解密,可以直接使用
- 18.MYSQL数据库(1)
- 国产折叠屏手机:华为领航,跟随者众
- vue 中使用 marked + highlight.js 代码高亮
- java从零到项目实战(八)
- 小米强推5G手机,自家的4G手机却被迫大降价清仓
- 字符串格式化:Formatter类
热门文章
- Consul 服务注册中心
- php 中getall,PHP getallheaders无法获取自定义头(headers)的问题
- python 柱形图_python绘制双柱形图代码实例
- python爬虫获取方法_小白学python爬虫:2.获得数据
- 4-Qt6控制台项目信号与槽
- 5不触发系统键盘_关于光轴,你所不知道的冷知识
- python 字符串操作_python中字符串的常见操作(一)
- c++ 结构体初始化_【干货】c语言基础语法——结构体
- python列表推导式_聊一聊:python的各种推导式(列表推导式、字典推导式、集合推导式)...
- 网页脚本基本java语法_JSP 基础语法