vue-awesome-swiper轮播插件
1. github上搜索vue-awesome-swiper
2. readme中有安装方法,建议在插件名后@版本号,使用稳定的老版本 npm install vue-awesome-swiper@x.x.x --save
3. 在项目main.js中引入
import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper' // require styles
import 'swiper/dist/css/swiper.css' Vue.use(VueAwesomeSwiper, /* { default global options } */)
4.创建单文件组件Swiper.vue(单文件组件三部分template、script、style)
<template>
<swiper :options="swiperOption">
<!-- slides -->
//这里是轮播的内容
<swiper-slide>I'm Slide 1</swiper-slide>
<swiper-slide>I'm Slide 2</swiper-slide>
<swiper-slide>
<img src=""/>
</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: 'HomeSwiper',
// 子组件的data必须是个函数
data() {
return {
swiperOption: {}
}
},
}
</script> <style lang="stylus" scoped> </style>
5. 在别的页面中引用,如在Home.vue
<template>
<div>
<home-header></home-header>
<home-swiper></home-swiper>
</div>
</template> <script>
import HomeHeader from './component/Header'
import HomeSwiper from './component/Swiper'
export default {
name: 'Home',
components: {
HomeHeader,
HomeSwiper
} }
</script> <style lang="stylus"> </style>
6.防抖动:在网速不好的情况下,swiper未加载出前,下方的div会占据,等到swiper出来时,占据位置的div会蹦走
处理方法:swiper外层嵌套div,让这个div撑开高度
<template>
<div class="wrapper">
<swiper :options="swiperOption">
...
</swiper>
</div>
</template> <script>
...
</script> <style lang="stylus" scoped>
.wrapper
overflow: hidden
width:100%
height:0
padding-bottom: 31.25% (宽高比,如果写在height,那么是和父级元素的高度,不是对比wrapper的宽度)
</style>
7.轮播图下面跟着跑的一排小圆点
<template>
<div class="wrapper">
<swiper :options="swiperOption">
<!-- 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>
</div>
</template> <script>
export default {
name: 'HomeSwiper',
// 子组件的data必须是个函数
data() {
return {
swiperOption: {
pagination: 'swiper-pagination'
}
}
},
}
</script> <style lang="stylus" scoped>
//三个箭头是穿透,这样就突破了scoped的限制
//这个class名从何而来,是从页面中审查元素得到的
.wrapper >>> .swiper-pagination-bullet-active
background: red !important
.wrapper
overflow: hidden
width:100%
height:0
padding-bottom: 31.25% (宽高比,如果写在height,那么是和父级元素的高度,不是对比wrapper的宽度)
</style>
8.Vue是数据驱动的框架,轮播的图片地址和数量不该固定写死
处理方法:v-for循环item,注意循环要加key
<template>
<div class="wrapper">
<swiper :options="swiperOption">
<!-- slides -->
<swiper-slide v-for="item of swiperList" :key="item.id">
<img :src="item.imgUrl" />
</swiper-slide>
<!-- Optional controls -->
<div class="swiper-pagination" slot="pagination"></div>
</swiper>
</div>
</template> <script>
export default {
name: 'HomeSwiper',
// 子组件的data必须是个函数
data() {
return {
swiperOption: {
pagination: 'swiper-pagination'
},
swiperList: [{ id: '0001', imgUrl: 'http://lkadand.adoaidiajd.jada.jpg' }, { id: '0002', imgUrl: 'jndakm.adkand.sda.jpg' }]
}
},
}
</script> <style lang="stylus" scoped>
//三个箭头是穿透,这样就突破了scoped的限制
//这个class名从何而来,是从页面中审查元素得到的
.wrapper >>> .swiper-pagination-bullet-active
background: red !important
.wrapper
overflow: hidden
width:100%
height:0
padding-bottom: 31.25% (宽高比,如果写在height,那么是和父级元素的高度,不是对比wrapper的宽度)
</style>
9.循环轮播
处理方法:加loop值为true
<template>
<div class="wrapper">
<swiper :options="swiperOption">
<!-- slides -->
<swiper-slide v-for="item of swiperList" :key="item.id"><img :src="item.imgUrl" /></swiper-slide>
<!-- Optional controls -->
<div class="swiper-pagination" slot="pagination"></div>
</swiper>
</div>
</template> <script>
export default {
name: 'HomeSwiper',
// 子组件的data必须是个函数
data() {
return {
swiperOption: {
pagination: 'swiper-pagination',
loop: true
},
swiperList: [{ id: '0001', imgUrl: 'http://lkadand.adoaidiajd.jada.jpg' }, { id: '0002', imgUrl: 'jndakm.adkand.sda.jpg' }]
}
},
}
</script> <style lang="stylus" scoped>
//三个箭头是穿透,这样就突破了scoped的限制
//这个class名从何而来,是从页面中审查元素得到的
.wrapper >>> .swiper-pagination-bullet-active
background: red !important
.wrapper
overflow: hidden
width:100%
height:0
padding-bottom: 31.25% (宽高比,如果写在height,那么是和父级元素的高度,不是对比wrapper的宽度)
</style>
vue-awesome-swiper轮播插件的更多相关文章
- 使用Swiper轮播插件引起的探索
提到Swiper轮播插件,小伙伴们应该不会感到陌生.以前我主要在移动端上使用,PC端使用较少. 注:这里需要注意的是,在PC端和移动端使用Swiper是不同的 官方给的版本有三个,分别是Swiper2 ...
- vue中引用swiper轮播插件
有时候我们需要在vue中使用轮播组件,如果是在vue组件中引入第三方组件的话,最好通过npm安装,从而进行统一安装包管理. 申明:本文所使用的是vue.2x版本. 通过npm安装插件: npm ins ...
- Swiper轮播插件使用
前文 Swiper是纯javascript打造的滑动特效插件,面向手机.平板电脑等移动终端,能实现触屏焦点图.触屏Tab切换.触屏多图切换等常用效果. 归根到此,Swi ...
- Swiper 轮播插件 之 动态加载无法滑动
1.原因:轮播图未完全动态加载完成,即初始化 2.方法一:ajax链式编程 $.ajax({ type: "get", url: serviceURL + "/listB ...
- vue中添加swiper轮播插件
网上找了很多,最后还是官网最完整. https://github.com/surmon-china/vue-awesome-swiper 安装: 1.npm install vue-awesome-s ...
- 使用swiper 轮播插件ajax 请求加载图片时,无法滑动问题
因为图片是动态创建的,在插件开始初始化时,文档流中没用图片,故没有创建相应宽度.通过调整js加载顺序,问题还是没有解决. 最后找到swiper插件 api 有属性是可以根据内容变动,自动初始化插件的, ...
- Sweetalert模态对话框与Swiper轮播插件、Bootstrap样式组件、AdminLTE后台管理模板地址
Sweetalert纯JS模态对话框插件地址:http://mishengqiang.com/sweetalert/ AdminLTE后台管理模板系统地址(基于Bootstrap):https://a ...
- 【swiper轮播插件】解决swiper轮播插件触控屏问题
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- swiper轮播问题之一:轮播图内容为动态数据生成时轮播图无法自动轮播
本人在用H5做移动端项目中使用Swiper遇到的两个问题,因此加深了对Swiper的掌握,分享出来对刚开始接触Swiper的童鞋们或多或少会有帮助. 首先,new Swiper的初始化最 ...
- swiper轮播在ie浏览器上遇到的显示问题探索
前言: 最近项目有一个需求,想要下图效果,鼠标指向头像图片,图片会放大同时上面的轮播会跟着切换: 鼠标移开头像图片,图片变回原来的大小 注:下图是我根据上面需求已经实现的效果,所以截图方便说明 思考: ...
随机推荐
- SVN提交大量无效文件补救方法
有的时候,使用SVN时候会发现,由于系统编译器的问题,会自动生成大量.class文件, 或者一些多余的配置文件,这里主要就是整理一下,当如果手误,将这些多余文件都提交到了svn上面的补救方法. 可以在 ...
- C++入门经典-例3.1-判断输入的数字是否为奇数
1:代码如下: // 3.1.cpp : 定义控制台应用程序的入口点. // #include "stdafx.h" #include <iostream> using ...
- 教材代码完成情况测试P186(课上测试)
一.任务详情 0 在Ubuntu中用自己的有位学号建一个文件,教材p186 Example8_8 1.修改p186 Example8_8中代码,密钥password不用手动输入,使用Random产生随 ...
- JS基础_强制类型转换
强制类型转换 将一个数据类型强制转换为其他的数据类型 类型转换主要指,将其他数据类型,转换为 string.number.boolean 1.将其他数据类型转换为string(返回值是强转后类型的值) ...
- sudo密码一直出错
Linux默认是没有将用户添加到sudoers列表中的,需要root手动将账户添加到sudoers列表中,才能让普通账户执行sudo命令. 所以要将用户添加到sudoers组中,才能执行sudo命令, ...
- Docker安装Zookeeper并进行操作
Docker安装Zookeeper 下载Zookeeper镜像docker pull zookeeper1启动容器并添加映射docker run --privileged=true -d --name ...
- ffmpeg剪切视频
测试的时候需要用到视频,原片太大了,就剪切几分钟来测试 ffmpeg -i input.mp4 -ss 0 -t 300 -acodec copy -vcodec copy -scodec copy ...
- ControlTemplate in WPF —— RadioButton
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" x ...
- 微信小程序---选择图片和调用微信拍照
1.实现点击头像按钮实现选择图片或者拍照,将图片重新设置成头像: //index.js //获取应用实例 var app = getApp() Page({ data: { motto: 'Hello ...
- window10安装Elasticsearch及可视化工具es header
1.下载es(选择windows版本) https://www.elastic.co/cn/downloads/elasticsearch 2.解压安装包,到bin目录下,运行elasticsearc ...